@use 'mixins';

.⁂-compose-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;

  &__select-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;

    button {
      @include mixins.button($theme: muted, $size: xs);

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

  &--transparent &__select-buttons {
    margin-bottom: -0.5rem;
  }

  &__spoiler-input {
    border-radius: 0.375rem;
    background-color: transparent !important;
  }

  &__editor__placeholder {
    @apply pointer-events-none absolute top-0 select-none text-[1rem] text-gray-600 dark:placeholder:text-gray-600;
    visibility: visible !important;
  }

  &:not(&--transparent) &__editor {
    @apply rounded-md border-gray-400 px-3 py-2 ring-2 focus-within:border-primary-500 focus-within:ring-primary-500 dark:border-gray-800 dark:ring-gray-800 dark:focus-within:border-primary-500 dark:focus-within:ring-primary-500;

    &__placeholder {
      padding-top: 0.5rem;
      @apply pt-2;
    }
  }

  &__modifiers {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.25rem;
    @apply text-gray-900;
  }

  &__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    &--condensed {
      display: none;
    }
  }

  &--with-avatar &__footer {
    margin-left: -3.5rem;
    @apply sm:ml-0;
  }

  &__buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    @apply flex items-center gap-2;
  }

  &__actions {
    @apply flex items-center gap-4 ml-auto rtl:ml-0 rtl:mr-auto;
  }

  &__counter {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  &__button {
    place-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    @apply rtl:space-x-reverse inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600 rounded-l-full pr-2;

    &__container {
      @apply flex items-center gap-px text-sm font-medium text-gray-100;

      svg {
        @apply size-4;
      }
    }

    &__actions {
      @apply h-full cursor-pointer py-2.5 pl-1 pr-3 last:rounded-r-full inline-flex select-none appearance-none border border-transparent bg-primary-500 transition-all hover:bg-primary-400 focus:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 focus:ring-offset-2 disabled:cursor-default disabled:opacity-75 dark:hover:bg-primary-600;
    }
  }

  &__poll {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    &__options {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    &__option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
  }

  &__schedule {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    &__hint {
      @include mixins.text($theme: muted);
    }

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

    .⁂-icon-button {
      @apply text-gray-400 hover:text-gray-600;
      background: transparent;

      svg {
        height: 1rem;
      }
    }
  }
}

.⁂-modal-root__container .⁂-compose-form__select-buttons {
  padding-top: 0.25rem;
}

.⁂-language-dropdown {
  &__search {
    @apply relative m-2 mt-1 block grow;

    > span {
      position: absolute;
      visibility: hidden;
    }

    button {
      @apply absolute inset-y-0 right-0 flex cursor-pointer items-center px-2 rtl:left-0 rtl:right-auto;

      svg {
        @apply size-5 text-gray-600;
      }
    }
  }

  &__options {
    margin-bottom: -0.25rem;
    height: 24rem;
    width: 100%;
    overflow: auto;
  }

  &__option {
    display: flex;
    width: 100%;
    gap: 0.5rem;
    padding: 0.625rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25;
    cursor: default;
    @apply text-gray-700 dark:text-gray-400;

    &--modified {
      cursor: pointer;
      @apply bg-gray-100 dark:bg-gray-800 black:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700;

      .⁂-language-dropdown__option__name {
        @apply text-black dark:text-white;
      }
    }

    &--available {
      @apply cursor-pointer hover:bg-gray-100 black:hover:bg-gray-900 dark:hover:bg-gray-800;
    }

    &--active {
      @apply cursor-pointer;
    }

    &__name {
      @apply flex-auto grow text-primary-600 dark:text-primary-400;
    }

    svg {
      height: 1rem;
      width: 1rem;
    }
  }
}
