.block {
  @include word-break;

  &__wrapper {
    padding-bottom: $spacing--l;
    padding-top: $spacing--l;
  }

  &__header {
    p {
      @include color-dark-shade-main;
      margin-bottom: 0;
      margin-top: $spacing--xs;
    }
  }

  // large
  &__header--l {
    .block__description,
    .block__description p {
      @include font-style('body--l', $block-header-l-description-font-style--l);
    }
  }

  &__title {
    @include font-style($block-title-font-style, $block-title-font-style);
    color: $color-brand--two;
    margin-bottom: 0;
  }

  &__control {
    display: flex;
    margin-top: $spacing--s;

    .icon {
      margin-right: 10px;
      svg {
        margin-top: $baseline * 0.6;
        min-width: 20px;
      }
    }
  }

  &__description {
    &--s {
      margin-top: $spacing--s;
    }
    &--dark {
      &,
      & p {
        color: $color-brand--two;
      }
    }

    // new
    &--optional {
      display: flex;

      .icon--inline {
        top: $spacing--xxs;
        margin-right: $spacing--xs;
      }

      p {
        display: inline;
        margin-top: 0;
        width: 100%;
      }
    }

    .button {
      margin-top: $spacing--m;
    }
  }

  .location-details {
    margin-top: $spacing--s;
    order: 4;
  }

  // viewport s
  @include viewport--m('inversed') {
    &__content--full-on-s {
      margin: 0 (-$grid-margin--s);
    }
  }

  // viewport m
  @include viewport--range($breakpoint-viewport--m, $breakpoint-viewport--l) {
    &__content--full-on-m {
      margin: 0 (-$grid-margin--m);
    }
  }

  // viewport s - m
  @include viewport--l('inversed') {
    &__header + .block__content {
      margin-top: $spacing--m;
    }

    &__more-link {
      display: inline-block;
      margin-top: $spacing--xs;
    }

    &__content {
      &--full-on-s,
      &--full-on-m {
        overflow: hidden;
      }
    }

    // filter
    &--filter {
      .block__wrapper {
        display: flex;
        flex-direction: column;
        padding-bottom: $baseline * 11;
        padding-top: $spacing--m;
      }

      .block__content {
        order: -1;
      }
    }

    // my randstad
    &--my-randstad .block__header + .block__content {
      margin-top: $spacing--l;
    }
  }

  // viewport l
  @include viewport--l {
    &__wrapper {
      align-items: flex-start;
      display: flex;
      padding-bottom: $spacing--xxl;
      padding-top: $spacing--xxl;

      .block--s & {
        padding-bottom: $spacing--xl;
        padding-top: $spacing--xl;
      }
      .block--xs & {
        padding-bottom: $spacing--l;
        padding-top: $spacing--l;
      }
    }

    &__header {
      width: grid-columns(3, 12);
    }

    // filter
    &--filter {
      .block__wrapper {
        padding-top: $spacing--l;
      }
    }

    // split
    &__header--split {
      align-items: center;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .block__title {
        margin-right: grid-gutter('l');
      }

      .block__description {
        order: 3;
      }
    }

    // large
    &__header--l {
      margin-top: -$spacing--l;

      .block__title {
        @include font-style(
          $block-header-l-title-font-style,
          $block-header-l-title-font-style--l
        );
      }

      .block__title--s {
        ~ .block__more-link {
          margin-top: 0;
        }
      }

      .block__description {
        margin-top: $spacing--s;
        width: 100%;
      }

      .block__description p {
        width: grid-columns(6, 12);
      }

      .block__description--s {
        margin-top: $spacing--xs;
        &,
        & p {
          @include font-style('body--l');
        }
      }

      .block__description--optional {
        margin-top: 20px;

        p {
          width: 100%;
        }
      }

      .block--s & {
        margin-top: 0;
      }

      .block__more-link {
        @include font-style('body--l', $block-header-l-more-link-font-style--l);
      }
    }

    &__more-link {
      margin-top: $spacing--xs;
    }

    &__content {
      margin-left: auto;
      width: grid-columns(9, 12);
      // add padding to right-hand side : one grid column + on grid gap
      &--s {
        padding-right: calc(
          (
              (#{$grid-column-units} + #{$grid-gutter-units}) / #{$grid-units-total--l}
            ) * 100%
        );
      }

      &--align-right.block__content--s {
        padding-right: 0;
        width: grid-columns(8, 12);
      }

      &--xs {
        padding-right: calc(
          (
              (#{$grid-column-units} + #{$grid-gutter-units}) * 2 / #{$grid-units-total--l}
            ) * 100%
        );
      }
    }
    // stacked
    &__wrapper--stacked {
      display: block;

      .block__header,
      .block__content {
        width: 100%;
      }

      .block__header + .block__content {
        margin-top: $spacing--l;
      }
    }
  }
}

@include blocks-background-mapping;

//my environment
.block__wrapper--dashboard {
  padding-top: 30px;
  padding-bottom: 0;
  @include viewport--l {
    padding-top: 50px;
    padding-bottom: 0;
  }
}

.block--my-environment .block__control {
  margin-bottom: 50px;
}

.block--my-environment .block__wrapper {
  padding-bottom: 30px;
  padding-top: 30px;

  @include viewport--l {
    padding-bottom: 40px;
    padding-top: 40px;
  }
}

.block--s.block--my-environment {
  padding-bottom: 80px;
}

.block.empty-message {
  padding-bottom: $spacing--l;

  @include viewport--l {
    padding-bottom: $spacing--xl;
  }
}