@use '../../helpers';
@use '../../mixins';

@mixin Accordion() {
  @if not mixins.includes('Accordion') {
    @include _Accordion();
  }
}

@mixin _Accordion() {
  .ods-accordion-box:not(.-separated) {
    background-color: helpers.color('background-surface');
    border: 1px solid helpers.color('border-separator');
    border-radius: helpers.border-radius('large');
    overflow: hidden;
  }

  .ods-accordion-item {
    overflow: hidden;
    position: relative;

    &:not(:last-child) {
      border-bottom: 1px solid helpers.color('border-separator');
    }
  }

  .-separated > .ods-accordion-item {
    background-color: helpers.color('background-surface');
    border: 1px solid helpers.color('border-separator');
    border-radius: helpers.border-radius('large');

    &:not(:last-child) {
      margin-bottom: helpers.space(2);
    }
  }

  .ods-accordion-toggler {
    @include helpers.font('400-regular');
    align-items: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    gap: helpers.space(2);
    justify-content: flex-start;
    outline-offset: helpers.space(-0.5);
    padding: var(--padding);
    transition: background-color linear 0.2s;
    width: 100%;

    &:hover {
      background-color: helpers.color('background-action-subtle-hover');
    }

    &:active {
      background-color: helpers.color('background-action-subtle');
    }
  }

  .ods-accordion-secondary-content {
    * {
      margin: 0;
    }
  }

  .ods-accordion-chevron {
    transition: transform linear 0.2s;
  }

  .-open > .ods-accordion-toggler > .ods-accordion-chevron {
    transform: rotateZ(180deg);
  }

  .ods-accordion-title {
    @include helpers.font('400-bold');
    margin-right: auto;
  }

  .ods-accordion-content-wrapper {
    box-sizing: border-box;
    overflow: hidden;
    position: absolute;
    transition: height ease-in-out 0.3s;
    visibility: hidden;
    will-change: height;

    &.-ready {
      position: relative;
      visibility: visible;
    }

    &.-with-separator {
      position: relative;
    }

    &.-with-separator::before {
      border-bottom: 1px solid helpers.color('border-separator');
      content: '';
      left: var(--padding);
      position: absolute;
      right: var(--padding);
      top: 0;
    }
  }

  .-with-separator > .ods-accordion-content {
    margin-top: var(--padding);
  }

  .ods-accordion-content {
    animation: fadeIn 0.4s;
    margin: helpers.space(1) var(--padding) var(--padding);
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}