/*
 * Accordion/Expandable component
 */

@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/mixins/typography';

@mixin pkt-accordion-item-standard-title {
  @include typography.get-text('pkt-txt-24-medium');
}

@mixin pkt-accordion-item-standard-content {
  @include typography.get-text('pkt-txt-18-light');

  padding: map.get(variables.$spacing, 'size-24');
}

@mixin pkt-accordion-item-compact-title {
  @include typography.get-text('pkt-txt-16-medium');
  padding: map.get(variables.$spacing, 'size-16');
}

@mixin pkt-accordion-item-compact-content {
  @include typography.get-text('pkt-txt-16-light');
  padding: map.get(variables.$spacing, 'size-16');
}

pkt-accordion,
pkt-accordion-item {
  display: block;
}

.pkt-accordion,
pkt-accordion::part(container) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr;
  row-gap: map.get(variables.$spacing, 'size-8');
  transition: grid-template-rows 500ms;

  &:focus-visible {
    border: 0.25rem solid var(--pkt-color-border-states-hover);
  }
}

// Skin variations for default accordion
.pkt-accordion--borderless,
pkt-accordion[skin='borderless'] {
  .pkt-accordion-item {
    border: none;

    &[open] {
      .pkt-accordion-item__title {
        box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
      }
    }
  }
}

.pkt-accordion--outlined,
pkt-accordion[skin='outlined'] {
  .pkt-accordion-item {
    border: 2px solid var(--pkt-color-border-subtle);
  }
}

pkt-accordion[skin='beige']::part(container),
pkt-accordion[skin='blue']::part(container) {
  row-gap: 0;
}

.pkt-accordion--beige,
pkt-accordion[skin='beige'] {
  row-gap: 0;
  :not(pkt-accordion-item) > .pkt-accordion-item:nth-of-type(odd),
  pkt-accordion-item:nth-of-type(odd) > .pkt-accordion-item {
    background-color: var(--pkt-color-surface-default-light-beige);
  }
}

.pkt-accordion--blue,
pkt-accordion[skin='blue'] {
  row-gap: 0;

  :not(pkt-accordion-item) > .pkt-accordion-item:nth-of-type(odd),
  pkt-accordion-item:nth-of-type(odd) > .pkt-accordion-item {
    background-color: var(--pkt-color-surface-default-light-blue);
  }
}

// COMPACT

.pkt-accordion--compact.pkt-accordion--borderless,
pkt-accordion[compact][skin='borderless'] {
  .pkt-accordion-item,
  .pkt-accordion-item--compact.pkt-accordion-item--borderless {
    border: none;

    &--open {
      .pkt-accordion-item__title {
        box-shadow: inset 0 0 0 0.125rem var(--pkt-color-border-states-active);
      }
    }
  }
}

// Set compact styles when using accordion component as wrapper and standalone accordion item
.pkt-accordion--compact,
pkt-accordion[compact] {
  .pkt-accordion-item,
  pkt-accordion-item > .pkt-accordion-item {
    .pkt-accordion-item__title {
      @include pkt-accordion-item-compact-title;
    }
    .pkt-accordion-item__content {
      @include pkt-accordion-item-compact-content;
    }
  }
}
// Accordion item
.pkt-accordion-item {
  color: var(--pkt-color-brand-dark-blue-1000);
  background-color: var(--pkt-color-brand-neutrals-white);
  transition: transform 0.3s;
  appearance: none;
  text-align: left;

  summary::-webkit-details-marker {
    display: none;
  }

  &__title {
    @include pkt-accordion-item-standard-title;
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: map.get(variables.$spacing, 'size-24');

    &:hover {
      text-decoration: underline;

      .pkt-accordion-item__icon {
        transform: translateY(0.25rem);
      }
    }

    &:focus-visible {
      outline: 0.25rem solid var(--pkt-color-border-states-focus);
    }
  }

  &__icon {
    transition: transform 0.2s;
  }

  &__content {
    @include pkt-accordion-item-standard-content;
    border-top: none;
    display: none;
  }

  // Skin variations for single accordion item (standalone)
  &--borderless,
  pkt-accordion-item[skin='borderless'] {
    border: none;

    &[open] {
      .pkt-accordion-item__title {
        box-shadow: inset 0 0 0 0.25rem var(--pkt-color-border-states-active);
      }
    }
  }

  &--outlined,
  pkt-accordion-item[skin='outlined'] {
    border: 2px solid var(--pkt-color-border-subtle);
  }

  &--beige,
  pkt-accordion-item[skin='beige'] {
    background-color: var(--pkt-color-surface-default-light-beige);
  }

  &--blue,
  pkt-accordion-item[skin='blue'] {
    background-color: var(--pkt-color-surface-default-light-blue);
  }
}

.pkt-accordion-item--compact {
  .pkt-accordion-item__title {
    @include pkt-accordion-item-compact-title;
  }
  .pkt-accordion-item__content {
    @include pkt-accordion-item-compact-content;
  }
}
// Accordion item when opened
.pkt-accordion-item[open] {
  .pkt-accordion-item {
    &__title {
      border-bottom: none;
      &:hover {
        .pkt-accordion-item__icon {
          transform: rotate(180deg) translateY(0.25rem);
        }
      }
    }

    &__content {
      display: block;
    }

    &__icon {
      transform: rotate(180deg) translateY(0);
    }
  }
}

.pkt-icon.pkt-accordion-item__icon svg {
  min-height: 2rem;
  min-width: 2rem;
}