@use '../includes/palettes';
@use '../includes/layout';
@use '../includes/responsive';
@use '../includes/outline';

@mixin expansion-panel {
  .neon-expansion-panel {
    flex: 1 0 auto;
    max-height: fit-content;

    .neon-expansion-panel__label-container {
      color: var(--neon-color-text-primary);
      @include outline.focus-text-outline(var(--neon-rgb-text-primary));
    }

    &__header {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      flex: 1 0 auto;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      letter-spacing: var(--neon-letter-spacing-s);
      font-weight: var(--neon-font-weight-semi-bold);
      @include layout.padding-horizontal(0.75, 0.75);
      padding-top: 0;
      padding-bottom: 0;
      user-select: none;

      &:focus {
        outline: none;
      }

      &--left {
        justify-content: flex-start;
        gap: var(--neon-space-16);
        flex: auto 0 1;

        .neon-expansion-indicator {
          order: 0;
        }

        .neon-expansion-panel__label-container {
          order: 1;
        }
      }
    }

    &__label-container {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      width: 100%;
      pointer-events: all;
      outline: none;

      & > .neon-icon {
        margin-right: var(--neon-space-8);
      }
    }

    &__content {
      @include layout.padding-horizontal(0.75, 0.75);
      padding-bottom: calc(0.75 * var(--neon-gutter-desktop));

      @include responsive.responsive(tablet) {
        padding-bottom: calc(0.75 * var(--neon-gutter-tablet));
      }

      @include responsive.responsive(mobile-large) {
        padding-bottom: calc(0.75 * var(--neon-gutter-mobile));
      }
    }

    &--s {
      &:not(.neon-expansion-panel--expanded) {
        height: var(--neon-size-s);
        max-height: var(--neon-size-s);
      }

      .neon-expansion-panel__header {
        height: var(--neon-size-s);
        max-height: var(--neon-size-s);
        font-size: var(--neon-font-size-s);

        .neon-icon {
          width: var(--neon-font-size-s);
          height: var(--neon-font-size-s);
        }
      }
    }

    &--m {
      &:not(.neon-expansion-panel--expanded) {
        height: var(--neon-size-m);
        max-height: var(--neon-size-m);
      }

      .neon-expansion-panel__header {
        height: var(--neon-size-m);
        max-height: var(--neon-size-m);
        font-size: var(--neon-font-size-m);

        .neon-icon {
          width: var(--neon-font-size-m);
          height: var(--neon-font-size-m);
        }
      }
    }

    &--l {
      &:not(.neon-expansion-panel--expanded) {
        height: 60rem;
        max-height: 60rem;
      }

      .neon-expansion-panel__header {
        height: 60rem;
        max-height: 60rem;
        font-size: var(--neon-font-size-xl);

        .neon-icon {
          width: var(--neon-font-size-xl);
          height: var(--neon-font-size-xl);
        }
      }
    }

    &.neon-expansion-panel--custom-header {
      height: auto;
      max-height: unset;

      .neon-expansion-panel__header {
        height: auto;
        max-height: unset;
      }
    }

    &--disabled {
      .neon-expansion-panel__header {
        cursor: not-allowed;
        color: var(--neon-color-primary);
      }
    }

    &--top {
      border-top: var(--neon-border-width-expansion-panel) var(--neon-border-style) var(--neon-border-color);

      &:last-of-type {
        border-bottom: var(--neon-border-width-expansion-panel) var(--neon-border-style) var(--neon-border-color);
      }
    }

    &--bottom {
      .neon-expansion-panel__header {
        order: 1;
        justify-content: center;
        border-top: var(--neon-border-width-expansion-panel) var(--neon-border-style) var(--neon-border-color);

        .neon-expansion-panel__label-container {
          margin-right: var(--neon-space-8);
        }
      }

      .neon-expansion-panel__content {
        @include layout.padding-vertical(0.75, 0.75);
      }
    }

    &--indented {
      .neon-expansion-panel__content {
        padding-left: var(--neon-space-40);
      }
    }

    .neon-expansion-indicator {
      margin-right: -2rem;
    }

    &--full-width {
      .neon-expansion-panel__header,
      .neon-expansion-panel__content {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
}