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

.ods-infobox {
  @extend %ods-padding-8;

  background-color: colors.$blue-light;

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

  &--yellow {
    background-color: colors.$yellow;
  }

  &--collapsible {
    background: none;
    margin-right: 3.5rem;
    padding: 0;
    position: relative;

    @include breakpoints.large {
      margin-right: 3.75rem;
    }
  }

  &__trigger {
    @extend %ods-padding-horizontal-5, %ods-padding-vertical-4, %ods-padding-horizontal-6-breakpoint-medium;
    @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
    @extend %ods-text--weight-medium;

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

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

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

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

    &:active {
      text-decoration: none;
    }
  }

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

  & .ods-collapsible-trigger::after {
    font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
    font-size: 1.5rem;
    content: map.get(icon-map.$icons, "plus-sign");
    border-radius: 50%;
    background-color: colors.$blue-light;
    right: -3.5rem;
    top: 0;
    position: absolute;
    text-align: center;
    padding-top: 1rem;
    height: 3.5rem;
    width: 3.5rem;

    @include breakpoints.large {
      height: 3.75rem;
      width: 3.75rem;
      right: -3.75rem;
    }
  }

  &__content {
    @extend %ods-padding-horizontal-5, %ods-padding-vertical-4, %ods-padding-horizontal-6-breakpoint-medium;

    background-color: #d8f9ff;
  }
}