@tailwind base;
@tailwind components;
@tailwind utilities;

#__plasmo {
  @apply p-4;
  height: 100vh;
  background-image: repeating-linear-gradient(
    45deg,
    var(--fallback-b1, oklch(var(--b1))),
    var(--fallback-b1, oklch(var(--b1))) 13px,
    var(--fallback-b2, oklch(var(--b2))) 13px,
    var(--fallback-b2, oklch(var(--b2))) 14px
  );
}

@layer components {
  .item-border {
    @apply border-base-content/20 hover:border-base-content/40 border outline outline-2 outline-offset-2 outline-transparent;
  }

  .item-border-active {
    @apply !outline-base-content;
  }

  .ellipsis {
    @apply overflow-ellipsis overflow-hidden whitespace-nowrap;
  }

  .h-center {
    @apply flex items-center;
  }

  .x-center {
    @apply flex justify-center;
  }

  .center {
    @apply flex justify-center items-center;
  }

  .active {
    background-color: var(--fallback-n, oklch(var(--n) / var(--tw-bg-opacity)));
    color: var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity)));
    --tw-bg-opacity: 1;
    --tw-text-opacity: 1;
  }

  .no-scrollbar::-webkit-scrollbar {
    @apply hidden;
  }
}

@bounceIn: ~"bubble-bounceIn";
@bounceOut: ~"bubble-bounceOut";

@keyframes @bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes @bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bubble {
  z-index: 999;
  position: relative;

  &-surround {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: var(--offset-size);
    margin-left: var(--offset-size);
    display: none;
    z-index: -1;

    &.animate {
      display: block;
    }

    &.animate.visible {
      animation: @bounceIn 0.3s;
    }

    &.animate.hidden {
      animation: @bounceOut 0.3s forwards;
    }
  }

  &-sub {
    top: var(--offset-size);
    left: var(--offset-size);
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      box-shadow:
        0 2px 10px 0 var(--color),
        0 2px 8px 0 var(--color);
    }
  }

  &:hover {
    box-shadow:
      0 2px 10px 0 var(--color),
      0 2px 8px 0 var(--color);
  }

  &.attach {
    transition: 0.3s;

    &.right:hover {
      border-radius: 50% 0 0 50%;
    }

    &.left:hover {
      border-radius: 0 50% 50% 0;
    }
  }
}
