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

.ods-contactbox {
  background-color: colors.$yellow;

  &__content > :last-child:not(.ods-contactbox__custom-content),
  &__content > :has(+ .ods-contactbox__custom-content:last-child) {
    @extend %ods-padding-bottom-5, %ods-padding-bottom-8-breakpoint-large;
  }

  &__trigger {
    @extend %ods-text--size-hotel, %ods-text--size-foxtrot-breakpoint-medium, %ods-text--size-delta-breakpoint-large;
    @extend %ods-padding-5, %ods-padding-8-breakpoint-large;

    display: block;
    position: relative;
    text-decoration: none;

    &.ods-collapsible-trigger {
      &::after {
        font-family: "Oslo Icons", sans-serif;
        content: map.get(icon-map.$icons, "plus-sign");
        position: absolute;
        right: units.unit-to-rem(5);
      }
    }

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

  &__group {
    @extend %ods-padding-horizontal-5, %ods-padding-horizontal-8-breakpoint-large;
  }

  &__group:not(:last-child) {
    @extend %ods-padding-bottom-4;
  }

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

    word-wrap: break-word;
  }

  &__time {
    @extend %ods-text--size-lima, %ods-text--weight-light;
  }

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

    .ods-link {
      word-break: break-all;
    }
  }
}