tooltip.pcss

.tooltip {
  --bg-opacity: 0.8 !important;
  z-index: 999;

  @apply inline-block relative pointer-events-none;

  &::before,
  &::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    opacity: 0.8;
  }

  &,
  &.tooltip--default {
    @apply text-xs py-2 px-4 rounded-none;
  }

  &--top,
  &.tooltip--top
  &.place-top {
    margin-top: -10px;

    &::before {
      border-top: 8px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      bottom: -8px;
      left: 50%;
      margin-left: -10px;
    }

    &::after {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      bottom: -6px;
      left: 50%;
      margin-left: -8px;
      border-top-style: solid;
      border-top-width: 6px;
    }
  }

  &--bottom,
  &.tooltip--bottom,
  &.place-bottom {
    margin-top: 10px;

    &::before {
      border-bottom: 8px solid transparent;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      top: -8px;
      left: 50%;
      margin-left: -10px;
    }

    &::after {
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      top: -6px;
      left: 50%;
      margin-left: -8px;
      border-bottom-style: solid;
      border-bottom-width: 6px;
    }
  }

  &--left,
  &.tooltip--left,
  &.place-left {
    margin-left: -10px;
    margin-top: 0;

    &::before {
      border-left: 8px solid transparent;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      right: -8px;
      top: 50%;
      margin-top: -5px;
    }

    &::after {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      right: -6px;
      top: 50%;
      margin-top: -4px;
      border-left-style: solid;
      border-left-width: 6px;
    }
  }

  &--right,
  &.tooltip--right,
  &.place-right {
    margin-left: 10px;
    margin-top: 0;

    &::before {
      border-right: 8px solid transparent;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      left: -8px;
      top: 50%;
      margin-top: -5px;
    }

    &::after {
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      left: -6px;
      top: 50%;
      margin-top: -4px;
      border-right-style: solid;
      border-right-width: 6px;
    }
  }

  &,
  &--default,
  &--dark,
  &.type-dark,
  &--black {
    @apply bg-black text-white;

    &.place-top::after,
    &.tooltip--top::after {
      border-top-color: theme("colors.black");
    }
    &.place-bottom::after,
    &.tooltip--bottom::after {
      border-bottom-color: theme("colors.black");
    }
    &.place-left::after,
    &.tooltip--left::after {
      border-left-color: theme("colors.black");
    }
    &.place-right::after,
    &.tooltip--right::after {
      border-right-color: theme("colors.black");
    }
  }

  &--error,
  &.type-error,
  &--red-600 {
    @apply bg-red-600 text-white;

    &.place-top::after,
    &.tooltip--top::after {
      border-top-color: theme("colors.red.600");
    }
    &.place-bottom::after,
    &.tooltip--bottom::after {
      border-bottom-color: theme("colors.red.600");
    }
    &.place-left::after,
    &.tooltip--left::after {
      border-left-color: theme("colors.red.600");
    }
    &.place-right::after,
    &.tooltip--right::after {
      border-right-color: theme("colors.red.600");
    }
  }

  &--warning,
  &.type-warning,
  &--yellow-400 {
    @apply bg-yellow-400 text-black;

    &.place-top::after,
    &.tooltip--top::after {
      border-top-color: theme("colors.yellow.400");
    }
    &.place-bottom::after,
    &.tooltip--bottom::after {
      border-bottom-color: theme("colors.yellow.400");
    }
    &.place-left::after,
    &.tooltip--left::after {
      border-left-color: theme("colors.yellow.400");
    }
    &.place-right::after,
    &.tooltip--right::after {
      border-right-color: theme("colors.yellow.400");
    }
  }

  &--info,
  &.type-info,
  &--blue-300 {
    @apply bg-blue-300 text-white;

    &.place-top::after,
    &.tooltip--top::after {
      border-top-color: theme("colors.blue.300");
    }
    &.place-bottom::after,
    &.tooltip--bottom::after {
      border-bottom-color: theme("colors.blue.300");
    }
    &.place-left::after,
    &.tooltip--left::after {
      border-left-color: theme("colors.blue.300");
    }
    &.place-right::after,
    &.tooltip--right::after {
      border-right-color: theme("colors.blue.300");
    }
  }

  &--grey-125,
  &--light,
  &.type-light {
    @apply bg-grey-125 text-grey-300;

    &.place-top::after,
    &.tooltip--top::after {
      border-top-color: theme("colors.grey.125");
    }
    &.place-bottom::after,
    &.tooltip--bottom::after {
      border-bottom-color: theme("colors.grey.125");
    }
    &.place-left::after,
    &.tooltip--left::after {
      border-left-color: theme("colors.grey.125");
    }
    &.place-right::after,
    &.tooltip--right::after {
      border-right-color: theme("colors.grey.125");
    }
  }

  &--green-400,
  &--success,
  &.type-success {
    @apply bg-green-400 text-white;

    &.place-top::after,
    &.tooltip--top::after {
      border-top-color: theme("colors.green.400");
    }
    &.place-bottom::after,
    &.tooltip--bottom::after {
      border-bottom-color: theme("colors.green.400");
    }
    &.place-left::after,
    &.tooltip--left::after {
      border-left-color: theme("colors.green.400");
    }
    &.place-right::after,
    &.tooltip--right::after {
      border-right-color: theme("colors.green.400");
    }
  }
}