@import '../settings/variables';
@import '../tools/mixins/breakpoints';
@import '../tools/mixins/text';

.o-text {
  &__headline {
    font-family: $font-maersk-headline;
    color: $color-secondary-dark;
    margin-bottom: 1.2em;

    &--1 {
      font-size: 2.5em;
      line-height: 1.35em;
      font-weight: $font-weight-light;

      @include media-breakpoint-down(lg) {
        font-size: 1.5em;
      }
    }

    &--2 {
      font-size: $font-size-big;
      line-height: 1.35em;
      font-weight: $font-weight-normal;

      @include media-breakpoint-down(lg) {
        font-size: 1.3125em;
      }
    }

    &--3 {
      font-size: 1.3125em;
      line-height: 1.35em;
      font-weight: $font-weight-normal;
      &--16px {
        font-size: 1em;
        line-height: 1.35em;
        font-weight: $font-weight-normal;
      }
    }

    &--4 {
      font-size: 1.25em;
      line-height: 1.2em;
      font-weight: $font-weight-normal;
    }
  }

  &__link {
    @include createText($font-maersk-text, $font-size-caption, $font-weight-normal, 1.35em);
    color: $color-primary;
  }

  &__button {
    @include createText($font-maersk-text, $font-size-caption, $font-weight-normal, 1.35em);
    color: $color-secondary-dark;
  }

  &__paragraph {
    @include createText($font-maersk-text, 1em, $font-weight-normal, 1.5em);
    color: $color-secondary-dark;

    &--secondary {
      color: $color-dark-grey;
    }

    &--bold {
      font-weight: $font-weight-bold;
    }

    &--large {
      font-size: 1.125em;
    }

    &--small {
      font-size: $font-size-caption;
    }
  }

  &__caption {
    @include createText($font-maersk-text, $font-size-medium, $font-weight-normal, 1.35em);
    color: $color-secondary-dark;

    &--graph {
      font-size: 0.625em;
      letter-spacing: 0.07em;
      line-height: 1.2em;
      text-transform: uppercase;
    }
  }

  &__menu {
    @include createText($font-maersk-headline, $font-size-medium, $font-weight-normal, 1.35em);
    color: $color-secondary-dark;
    letter-spacing: 1.2px;
    text-transform: uppercase;
  }

  &__label {
    @include createText($font-maersk-headline, $font-size-medium, $font-weight-bold, 1.35em);
    color: $color-secondary-dark;
    text-transform: uppercase;
  }

  &__key-figure {
    @include createText($font-maersk-text, $font-size-big, $font-weight-normal, 1.3461em);
    color: $color-secondary-dark;

    &--medium {
      font-size: 1.25em;
    }
  }
}