@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;

.ui-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-accordion-item {
  $self: &;

  --border-color: var(--accordion-item-border-color);
  --border-width: 1px;

  outline: var(--border-width) solid var(--border-color);
  outline-offset: calc(var(--border-width) * -1);
  border-radius: 12px;
  background: $clr-white;
  transition: .2s ease-out;
  transition-property: outline-color, background-color, color;
  -webkit-tap-highlight-color: transparent;

  &:hover {
    --border-width: 2px;
  }

  &.is-focused {
    --border-width: 2px;
  }

  &.is-active {
    --border-width: 2px;
    --border-color: #{$clr-grey-500};
  }

  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    border: none;
    padding: var(--accordion-head-padding, 24px);
    background: transparent;
    transition: padding .2s ease-in-out;
    cursor: pointer;
    outline: none;
    user-select: none;

    #{$self}.is-active & {
      padding: var(--accordion-head-active-padding, 24px 24px 4.5px);
    }

    #{$self}.is-disabled & {
      cursor: default;
    }
  }

  &__title {
    color: $clr-grey-600;
  }

  &__icon {
    color: $clr-grey-600;
  }

  &__wrapper {
    will-change: height;
    overflow: hidden;
  }

  &__content {
    @include txt-i;

    color: $clr-grey-600;
    padding: var(--accordion-content-padding, 0 24px 24px);
  }

  @include element-variant('accordion-item', '', (
          'border-color': $clr-grey-300,
  ))
}

.ui-accordion-transition {
  transition: .2s height ease-in-out,
  .2s padding-top ease-in-out,
  .2s padding-bottom ease-in-out;
}

.ui-accordion-transition-leave-active,
.ui-accordion-transition-enter-active {
  transition: .2s max-height ease-in-out,
  .2s padding-top ease-in-out,
  .2s padding-bottom ease-in-out;
}