@import '../../../mixins/focus-state';
@import '../../../mixins/disabled-style';
@import '../../../mixins/box-sizing';

.tds-accordion-item {
  @include tds-box-sizing;

  list-style: none;
  color: var(--tds-accordion-color);
  position: relative;

  button.tds-accordion-header-icon-start,
  button.tds-accordion-header-icon-end {
    all: unset;
  }

  .tds-accordion-header-icon-start,
  .tds-accordion-header-icon-end,
  button.tds-accordion-header-icon-start,
  button.tds-accordion-header-icon-end {
    @include tds-box-sizing;

    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;

    // fixme: wrong line-height compared to production
    font: var(--tds-headline-07);
    letter-spacing: var(--tds-headline-07-ls);
    padding: var(--tds-spacing-element-16);
    background-color: var(--tds-accordion-background);

    .tds-accordion-icon {
      transform-origin: center;
      transition: transform 0.15s ease-in-out;
      color: var(--tds-accordion-icon-color);

      & > tds-icon {
        display: block;
      }
    }
  }

  .tds-accordion-title {
    flex-grow: 2;
  }

  .tds-accordion-panel {
    cursor: default;
    padding: var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32)
      var(--tds-spacing-element-16);
    display: none;
    font: var(--tds-detail-03);
    letter-spacing: var(--tds-detail-03-ls);

    p {
      margin: 0;
      padding: 0;
    }

    &--padding-reset {
      padding-right: var(--tds-spacing-element-16);
    }
  }

  .tds-accordion-header-icon-end {
    .tds-accordion-icon {
      margin: 0 0 0 var(--tds-spacing-element-32);
    }
  }

  .tds-accordion-header-icon-start {
    .tds-accordion-title {
      order: 1;
    }

    .tds-accordion-icon {
      order: 0;
      margin: 0 var(--tds-spacing-element-16) 0 0;
    }
  }

  &.disabled {
    &,
    .tds-accordion-header-icon-end,
    .tds-accordion-header-icon-start,
    .tds-accordion-panel {
      color: var(--tds-accordion-color-disabled);
      cursor: not-allowed;

      .tds-accordion-icon {
        color: var(--tds-accordion-color-disabled);
      }
    }

    &:hover,
    &:focus-within,
    &:active,
    &.active {
      @include tds-disabled-style;
    }
  }

  &.expanded {
    .tds-accordion-panel {
      display: block;
      padding-bottom: 31px;
    }

    .tds-accordion-icon {
      transform: rotate(180deg);
    }

    .tds-accordion-header-icon-end {
      .tds-accordion-icon {
        margin-right: 0;
        margin-left: var(--tds-spacing-element-32);
      }
    }

    .tds-accordion-header-icon-start {
      .tds-accordion-icon {
        margin-left: 0;
        margin-right: var(--tds-spacing-element-16);
      }
    }
  }

  border-top: 1px solid var(--tds-accordion-border);

  &:first-child {
    margin-bottom: -1px;
    border-bottom: 1px solid var(--tds-accordion-border);
  }

  // Only apply focus border when focus is on the header buttons, not on panel content
  &:has(.tds-accordion-header-icon-start:focus),
  &:has(.tds-accordion-header-icon-end:focus) {
    border-top: 1px solid var(--tds-accordion-border-focus);
  }

  &[disabled='true']:focus-within {
    border-color: var(--tds-accordion-border);
  }
}

:host(:focus-within) {
  .tds-accordion-item {
    // Only apply focus styles when focus is on the header buttons, not on panel content
    &:has(.tds-accordion-header-icon-start:focus),
    &:has(.tds-accordion-header-icon-end:focus) {
      @include tds-focus-state;
    }

    .tds-accordion-header-icon-start,
    .tds-accordion-header-icon-end {
      background-color: var(--tds-accordion-background-focus);
      outline: none;
    }
  }
}

:host(:hover) {
  .tds-accordion-header-icon-start,
  .tds-accordion-header-icon-end {
    background-color: var(--tds-accordion-background-hover);
  }
}

:host(:focus-within:hover) {
  .tds-accordion-item {
    // Only apply focus styles when focus is on the header buttons, not on panel content
    &:has(.tds-accordion-header-icon-start:focus),
    &:has(.tds-accordion-header-icon-end:focus) {
      @include tds-focus-state;
    }

    .tds-accordion-header-icon-start,
    .tds-accordion-header-icon-end {
      background-color: var(--tds-accordion-background-hover);
      outline: none;
    }
  }
}

.tds-accordion-item:has(:hover) {
  background-color: var(--tds-accordion-background-hover);
}

.tds-accordion-item:has(.tds-accordion-header-icon-start:active),
.tds-accordion-item:has(.tds-accordion-header-icon-end:active) {
  background-color: var(--tds-accordion-background-active);
}

:host(:hover)
  .tds-accordion-item:has(.tds-accordion-header-icon-start:active)
  .tds-accordion-header-icon-start,
:host(:hover)
  .tds-accordion-item:has(.tds-accordion-header-icon-end:active)
  .tds-accordion-header-icon-end {
  background-color: var(--tds-accordion-background-active);
}

.tds-accordion-header-icon-start:active,
.tds-accordion-header-icon-end:active {
  outline: none;
}