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

.ods-fieldset {
  :last-child {
    @extend %ods-margin-bottom-0;
  }

  &__required {
    @extend %ods-margin-top-1;
    @extend %ods-padding-0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    &::before {
      content: "* ";
    }

    &--optional::before {
      content: none;
    }
  }

  &__legend {
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-medium;

    width: 100%;

    > * {
      text-decoration: none;
    }
  }

  &[aria-required="true"] > &__legend::after {
    content: " *";
  }

  &--no-border {
    border: none;
    @extend %ods-padding-0;

    & .ods-fieldset__legend {
      @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
      @extend %ods-text--weight-medium;
      @extend %ods-margin-bottom-1;
    }
  }

  &--error {
    border-color: colors.$red;
  }

  &--disabled,
  &:disabled {
    & .ods-fieldset__legend {
      color: colors.$grayscale-40;
    }
  }


  &--filter {
    @extend %ods-margin-bottom-3, %ods-padding-bottom-3;

    border: none;
    border-bottom: 2px solid colors.$blue-dark;

    & .ods-fieldset__legend {
      > * {
        display: block;
        cursor: pointer;
        position: relative;

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

        &::after {
          font-family: "Oslo Icons", Arial, Helvetica, sans-serif;
          @extend %ods-text--size-golf;

          content: map.get(icon-map.$icons, "plus-sign");
          line-height: inherit;
          position: absolute;
          top: 0;
          right: units.unit-to-rem(1);
        }
      }

      > *.ods-collapsible-trigger--expanded::after {
        content: map.get(icon-map.$icons, "minus-sign");
      }
    }

    > .ods-collapsible-content:first-of-type {
      @extend %ods-margin-top-3;
    }

    &:first-of-type {
      & .ods-fieldset__legend {
        @extend %ods-padding-top-3;

        border-top: 2px solid colors.$blue-dark;
      }
    }

    &:last-of-type {
      @extend %ods-margin-bottom-0;
    }
  }

}