@reown/appkit-ui/dist/esm/src/composites/wui-tooltip/styles.js

The full stack toolkit to build onchain app UX.

import { css } from '../../utils/ThemeHelperUtil.js';
export default css `
  :host {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  wui-icon {
    position: absolute;
    width: 12px !important;
    height: 4px !important;
  }

  /* -- Variants --------------------------------------------------------- */
  :host([data-variant='fill']) {
    background-color: ${({ colors }) => colors.neutrals100};
  }

  :host([data-variant='shade']) {
    background-color: ${({ colors }) => colors.neutrals900};
  }

  :host([data-variant='fill']) > wui-text {
    color: ${({ colors }) => colors.black};
  }

  :host([data-variant='shade']) > wui-text {
    color: ${({ colors }) => colors.white};
  }

  :host([data-variant='fill']) > wui-icon {
    color: ${({ colors }) => colors.neutrals100};
  }

  :host([data-variant='shade']) > wui-icon {
    color: ${({ colors }) => colors.neutrals900};
  }

  /* -- Sizes --------------------------------------------------------- */
  :host([data-size='sm']) {
    padding: ${({ spacing }) => spacing[1]} ${({ spacing }) => spacing[2]};
    border-radius: ${({ borderRadius }) => borderRadius[2]};
  }

  :host([data-size='md']) {
    padding: ${({ spacing }) => spacing[2]} ${({ spacing }) => spacing[3]};
    border-radius: ${({ borderRadius }) => borderRadius[3]};
  }

  /* -- Placements --------------------------------------------------------- */
  wui-icon[data-placement='top'] {
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 95%);
  }

  wui-icon[data-placement='bottom'] {
    top: 0;
    left: 50%;
    transform: translate(-50%, -95%) rotate(180deg);
  }

  wui-icon[data-placement='right'] {
    top: 50%;
    left: 0;
    transform: translate(-65%, -50%) rotate(90deg);
  }

  wui-icon[data-placement='left'] {
    top: 50%;
    right: 0%;
    transform: translate(65%, -50%) rotate(270deg);
  }
`;
//# sourceMappingURL=styles.js.map