@use 'mixins';
@use 'variables';

.⁂-accordion {
  border-radius: 0.5rem;
  background: white;
  color: rgb(var(--text-gray-900));
  @apply shadow;

  &:is(.dark *) {
    background: rgb(var(--color-primary-800));
    color: rgb(var(--color-gray-100));
    box-shadow: none;
  }

  &__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    font-weight: 600;

    &__actions {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    &__action .⁂-icon {
      width: 1.25rem;
      height: 1.25rem;
      color: rgb(var(--color-gray-700));

      &:is(.dark *) {
        color: rgb(var(--color-gray-600));
      }
    }

    &__chevron {
      width: 1.25rem;
      height: 1.25rem;
      color: rgb(var(--color-gray-700));
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 150ms;

      &:is(.dark *) {
        color: rgb(var(--color-gray-600));
      }
    }
  }

  &__body {
    padding: 1rem;
    border-bottom-right-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    border-top-width: 1px;
    border-style: solid;
    border-color: rgb(var(--color-gray-100));

    &:is(.dark *) {
      border-color: rgb(var(--color-primary-900));
    }

    &:is(.dark.black *) {
      border-color: black;
    }

    p {
      @include mixins.text;
    }
  }

  &:not(&--expanded) {
    .⁂-accordion__body {
      height: 0;
      display: none;
    }
  }

  &--expanded {
    .⁂-accordion__header__chevron {
      transform: rotate(180deg);
    }
  }
}

.⁂-divider {
  position: relative;

  > div:first-child {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;

    > div {
      width: 100%;
      border-top-width: 2px;
      border-style: solid;
      border-color: rgb(var(--color-gray-100));

      &:is(.dark *) {
        border-top-color: rgb(var(--color-gray-800));
      }

      &:is(.dark.black *) {
        border-top-width: 1px;
      }
    }
  }

  &__text {
    position: relative;
    display: flex;
    justify-content: center;

    > span {
      background: white;
      color: rgb(var(--color-gray-700));
      padding: 0 0.5rem;

      &:is(.dark *) {
        background: rgb(var(--color-gray-900));
        color: rgb(var(--color-gray-600));
      }

      &:is(.dark.black *) {
        background: black;
      }
    }
  }
}

.⁂-icon {
  display: flex;
  position: relative;
  flex-shrink: 0;
  flex-direction: column;

  &__counter {
    position: absolute;
    right: -0.75rem;
    top: -0.5rem;
    display: flex;
    height: 1.25rem;
    min-width: 1.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-break: break-word;
  }
}

.⁂-counter {
  display: flex;
  height: 1.25rem;
  min-width: 1.25rem;
  max-width: 1.625rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: white;

  @apply bg-secondary-500 ring-2 ring-white black:ring-black dark:ring-gray-800;
}

.⁂-list {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.⁂-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;

  @apply bg-gradient-to-r from-gradient-start/10 to-gradient-end/10 dark:from-gradient-start/10 dark:to-gradient-end/10;

  &--md {
    padding: 0.5rem 1rem;
  }

  &--sm {
    padding: 0.125rem 0.5rem;
  }

  &:first-child {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  &:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
  }

  &__label {
    display: flex;
    flex-direction: column;
    @apply py-1.5 pr-4 rtl:pl-4 rtl:pr-0;

    > :first-child {
      word-break: break-word;
      @apply text-gray-900 dark:text-gray-100;
    }
  }

  &__hint {
    font-size: 0.875rem;
    line-height: 1.25rem;

    @apply text-gray-700 dark:text-gray-600;
  }

  &__body {
    overflow: hidden;

    @apply text-gray-700 dark:text-gray-600;

    > .⁂-icon {
      margin-left: 0.25rem;

      @apply rtl:rotate-180;
    }
  }
}

a.⁂-list-item,
.⁂-list-item[role='link'] {
  cursor: pointer;

  @apply hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5;
}

.⁂-select {
  @apply truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 black:bg-black dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm;
}

.⁂-card-header {
  @apply flex items-center gap-2;

  &__button {
    @apply rounded-full text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100;

    > .⁂-icon {
      height: 1.5rem;
      width: 1.5rem;
      @apply rtl:rotate-180;
    }
  }
}

.⁂-card-title {
  @include mixins.text($size: xl, $weight: bold, $truncate: true);
}

.⁂-animated-number {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}

.⁂-scroll-top-button {
  @apply fixed left-1/2 z-50 -translate-x-1/2 transition-all -top-4 opacity-0;

  &--visible {
    @apply top-2 opacity-100;
  }

  button {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    border-radius: 9999px;
    padding: 0.5rem 1rem;
    color: white;
    @apply bg-primary-600/80 backdrop-blur-md backdrop-saturate-200 transition-transform hover:scale-105 hover:bg-primary-700/80 active:scale-100;

    .⁂-icon svg {
      width: 1rem;
      height: 1rem;
    }

    p {
      @include mixins.text($theme: inherit, $size: sm);
    }
  }
}

.⁂-autosuggest-suggestions {
  @apply fixed w-full z-[1001] shadow bg-white dark:bg-gray-900 rounded-lg py-1 dark:ring-2 dark:ring-primary-700 focus:outline-none hidden;

  &--visible,
  &:focus-within {
    @apply block;
  }

  &__items {
    @apply space-y-0.5;
  }

  &__item {
    @apply px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 focus:bg-gray-100 dark:focus:bg-primary-800 hover:bg-gray-100 dark:hover:bg-gray-800;

    &--selected {
      @apply bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800;
    }
  }

  &__menu-item {
    @apply flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800 dark:focus:bg-primary-800;
  }
}

div[data-viewport-type='window']:has(.⁂-empty-message) {
  position: initial !important;
}

.⁂-modal {
  @apply pointer-events-auto relative mx-auto flex w-full flex-col overflow-auto rounded-2xl bg-white text-start align-middle text-gray-900 shadow-xl transition-all ease-in-out black:bg-black dark:bg-primary-900 dark:text-gray-100;
  max-height: calc(min(90vh, 100dvh));
  max-width: 36rem;

  @media (min-width: variables.$breakpoint-md) {
    max-height: calc(min(80vh, 100dvh));
  }

  &--first-render {
    @apply no-reduce-motion:-bottom-32;
  }

  &:not(&--first-render) {
    @apply bottom-0;
  }

  &__title {
    @apply sticky top-0 z-10 bg-white/75 p-6 pb-2 backdrop-blur backdrop-saturate-200 black:bg-black/75 dark:bg-primary-900/75;

    > div {
      @apply flex w-full items-center gap-2;
    }

    h3 {
      @apply grow text-lg font-bold leading-6 text-gray-900 dark:text-white;
    }

    .⁂-icon-button {
      @apply text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180;
    }
  }

  &--close-position-left &__title > div {
    @apply flex-row-reverse;
  }

  &__body {
    @apply p-6;
  }

  :has(.⁂-modal__title) &__body {
    @apply pt-0;
  }

  &__children {
    @apply w-full;
  }

  &__actions {
    @apply flex justify-between mt-5;

    &__cancel {
      @apply grow;
    }

    &__other {
      @apply flex gap-2;
    }

    button.⁂-modal__action-cancel {
      @include mixins.button($theme: tertiary);
    }

    button.⁂-modal__action {
      @include mixins.button($theme: primary);

      &--danger {
        @include mixins.button($theme: danger);
      }
    }

    button.⁂-modal__action-secondary {
      @include mixins.button($theme: secondary);
    }
  }
}

.⁂-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;

  > div {
    background: rgb(var(--color-gray-200));
    padding: 1rem;
    border-radius: 50%;

    &:is(.dark *) {
      background: rgb(var(--color-gray-800));
    }

    svg {
      height: 1.5rem;
      width: 1.5rem;
      color: rgb(var(--color-gray-600));
    }
  }

  p {
    @include mixins.text($align: center, $theme: muted);
  }
}

.⁂-dropdown-menu {
  z-index: 1001;
  display: flex;

  > div {
    z-index: 1001;
    @apply bg-white py-1 shadow-lg ease-in-out focus:outline-none black:bg-black no-reduce-motion:transition-all dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 rounded-md min-w-56 max-w-sm duration-100;
  }

  &__arrow {
    @apply pointer-events-none absolute z-[-1] size-3 bg-white black:bg-black dark:bg-gray-900;
  }

  &__content {
    max-height: 100%;
    overflow: auto;
  }

  &__page {
    max-width: 100%;
  }

  &__expanded-page {
    width: fit-content;
    @apply mr-auto;
  }

  &__header {
    @apply flex gap-3 items-center mx-2 my-1 text-gray-700 dark:text-gray-300;

    svg {
      @apply h-5 w-5;
    }
  }

  &__items {
    overflow: hidden;

    hr {
      @apply mx-2 my-1 block h-[2px] border-none bg-gray-100 dark:bg-gray-800;
    }

    li {
      @apply truncate focus-visible:ring-2 focus-visible:ring-primary-500;
    }
  }
}

.⁂-card {
  &--rounded {
    @apply bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none;

    &.⁂-card {
      &--md {
        @apply p-4 sm:rounded-xl;
      }

      &--lg {
        @apply p-4 sm:p-6 sm:rounded-xl;
      }

      &--xl {
        @apply p-4 sm:p-10 sm:rounded-3xl;
      }

      &--md,
      &--lg,
      &--xl {
        @apply black:rounded-none;
      }
    }
  }

  &--slim {
    @apply py-4;
  }
}

.⁂-big-card {
  &__header {
    @apply flex flex-col gap-2 -mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10;

    h1 {
      @include mixins.text($size: 2xl, $align: center, $weight: bold);
    }

    p {
      @include mixins.text($theme: muted, $align: center);
    }
  }

  &__body {
    @apply mx-auto sm:w-2/3 sm:pt-10;
  }
}

.⁂-column {
  position: relative;

  &__header {
    &__action {
      display: flex;
      flex-grow: 1;
      justify-content: end;
    }
  }

  &[column-type='transparent'] {
    .⁂-column__header {
      @apply p-4 sm:p-0 sm:pb-4 black:p-4;
    }
  }

  &[column-type='filled'] {
    .⁂-column__header {
      @apply rounded-t-3xl sticky top-0 z-10 bg-white/90 dark:bg-primary-900/90 black:bg-black/75 backdrop-blur backdrop-saturate-200 -mt-4 -mx-4 p-4;

      &--scrolled {
        @apply rounded-t-none;
      }
    }

    &.⁂-card-lg {
      .⁂-column__header {
        @apply sm:-mt-6 sm:-mx-6 sm:p-6;
      }
    }
  }
}

.⁂-emoji {
  @apply transition-transform hover:scale-125;
}
