@use "system/breakpoints";
@use "system/colors";
@use "system/icons";
@use "system/icon-map";
@use "system/typography";
@use "system/spacing";
@use "sass:map";

.ods-accordion {
  &--outlined {
    & .ods-accordion__item {
      @extend %ods-margin-top-3;

      border: 2px solid colors.$gray;
    }

    & .ods-accordion__trigger {
      @extend %ods-padding-right-13, %ods-padding-bottom-3, %ods-padding-left-4;
      @extend %ods-padding-right-19-breakpoint-medium;

      &--chevron::after,
      &--plus::after {
        margin-right: 0;
      }
    }

    & .ods-accordion__content {
      @extend %ods-margin-bottom-0;
      @extend %ods-padding-top-2, %ods-padding-bottom-3;
      @extend %ods-padding-horizontal-4;
    }
  }

  &--underlined {
    & .ods-accordion__item {
      border-bottom: 2px solid colors.$gray;

      &:last-child {
        border-bottom: none;
      }
    }

    & .ods-accordion__trigger {
      @extend %ods-padding-right-13, %ods-padding-bottom-2, %ods-padding-left-4;
      @extend %ods-padding-right-19-breakpoint-medium;
      @extend %ods-margin-bottom-1; // This makes the trigger focus style visible
    }

    & .ods-accordion__content {
      @extend %ods-margin-bottom-0;
      @extend %ods-padding-top-2, %ods-padding-horizontal-4, %ods-padding-bottom-3;
    }
  }

  &--outlined,
  &--underlined {
    & .ods-accordion__heading {
      @extend %ods-text--size-juliett;
      @extend %ods-text--weight-medium;
    }

    & .ods-accordion__trigger {
      @extend %ods-padding-top-3, %ods-margin-top-0;

      &:focus,
      &:active,
      &--focus,
      &--active {
        background-color: colors.$white;
        color: colors.$blue-state;
      }

      &--chevron::after,
      &--plus::after {
        @extend %ods-icon--size-juliett;
      }
    }

    & .ods-accordion__description {
      @extend %ods-text--size-kilo;
      @extend %ods-text--weight-regular;

      display: block;
    }
  }

  &__main-heading {
    @extend %ods-text--size-golf, %ods-text--size-delta-breakpoint-large;
    @extend %ods-text--weight-regular;
    @extend %ods-margin-bottom-6, %ods-margin-bottom-5-breakpoint-large;
  }

  &__heading {
    @extend %ods-text--size-india, %ods-text--size-golf-breakpoint-medium;
    @extend %ods-text--weight-medium;
  }

  &__trigger {
    @extend %ods-margin-bottom-0, %ods-margin-top-3;
    @extend %ods-padding-vertical-5, %ods-padding-left-5, %ods-padding-right-11;
    @extend %ods-padding-vertical-6-breakpoint-medium, %ods-padding-left-8-breakpoint-medium, %ods-padding-right-13-breakpoint-medium;

    border: none;
    background-color: colors.$white;
    color: colors.$blue-dark;
    display: block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    outline: none;
    position: relative;
    text-align: left;
    width: 100%;

    &:hover,
    &:focus,
    &:active {
      cursor: pointer;
    }

    &:hover,
    &--hover {
      text-decoration: underline;
      color: colors.$blue-state;
    }

    &:focus,
    &:active,
    &--focus,
    &--active {
      background-color: colors.$blue-state;
      color: colors.$white;
      text-decoration: none;
    }

    &--active:hover,
    &--focus:hover  {
      color: colors.$white;
      text-decoration: none;
    }

    &--focus,
    &:focus-visible {
      background-color: colors.$white;
      color: colors.$blue-state;
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }

    &--chevron::after {
      content: map.get(icon-map.$icons, "chevron-thin-down");
    }

    &--plus::after {
      content: map.get(icon-map.$icons, "plus-sign");
    }

    &::after {
      @extend %ods-icon--size-hotel, %ods-icon--size-golf-breakpoint-medium;

      font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
      position: absolute;
      right: 0;
      text-align: center;
      top: 50%;

      @include breakpoints.medium {
        margin-right: 0.75rem;
      }
    }
  }

  &__content {
    @extend %ods-padding-5, %ods-padding-bottom-8;
    @extend %ods-padding-top-6-breakpoint-large, %ods-padding-bottom-8-breakpoint-large, %ods-padding-horizontal-8-breakpoint-large;
    @extend %ods-margin-bottom-3;

    background-color: colors.$white;
  }
}