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

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

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

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

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

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

  .center {
    @apply flex items-center justify-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;
  }
}

.ellipsis-clamp(@i: 1) when (@i =< 10) {
  .ellipsis-clamp-@{i} {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @i;
  }
  .ellipsis-clamp((@i + 1));
}

.ellipsis-clamp();

@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: 10;
  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;
    box-shadow:
      0 2px 10px 0 var(--shadow-color),
      0 2px 8px 0 var(--shadow-color);
    &:hover {
    }
  }

  &: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;
    }
  }
}

@keyframes fadeInDown {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeOutUp {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px);
    opacity: 0;
  }
}

