.application {
  $component-name: ".application";
  $padding-horizontal: $page-padding-side;
  $padding-horizontal-medium: -1;
  $padding-vertical: -2;
  $margin-details-item: -4;
  $padding-priority: -4;
  $padding-icon: -4;

  @include set-colors("background-secondary");
  padding-bottom: spacing($padding-vertical);

  // THE STATUS COLORS
  &--pending {
    border-color: color("theme");

    & #{$component-name}__status {
      @include set-colors("theme-secondary");

      &::before {
        @include set-colors("theme");
      }
    }
  }

  &--student-place-not-offered,
  &--annulled {
    border-color: color("background-secondary");

    & #{$component-name}__status {

      &::before {
        background-color: color("background-secondary");
        box-shadow: 0 0 0 $width-border color("background") inset;

        @include breakpoint("medium") {
          box-shadow: 0 0 0 $width-border color("background");
        }
      }
    }
  }

  &--requirements-fulfilled,
  &--student-place-offered,
  &--student-place-offer-accepted {
    border-color: color("utility-confirm");

    & #{$component-name}__status {
      @include set-colors("utility-confirm-background", $rewrite-css-vars: true);

      &::before {
        background-color: color("utility-confirm");
      }
    }
  }

  &--standby {
    border-color: color("utility-attention");

    & #{$component-name}__status {
      @include set-colors("utility-attention-background", $rewrite-css-vars: true);

      &::before {
        background-color: color("utility-attention");
      }
    }
  }

  &--requirements-not-fulfilled,
  &--student-place-offer-rejected {
    border-color: color("utility-warning");

    & #{$component-name}__status {
      @include set-colors("utility-warning-background", $rewrite-css-vars: true);

      &::before {
        background-color: color("utility-warning");
      }
    }
  }


  // THE STAUS ICONS
  &--pending {
    & #{$component-name}__status {
      @include set-icon("receipt", $include-pseudo: "before");
    }
  }

  &--student-place-not-offered {
    & #{$component-name}__status {
      @include set-icon("student-place-not-offered", $include-pseudo: "before");
    }
  }

  &--requirements-fulfilled {
    & #{$component-name}__status {
      @include set-icon("confirm", $include-pseudo: "before");
    }
  }

  &--student-place-offered {
    & #{$component-name}__status {
      @include set-icon("student-place-offered", $include-pseudo: "before");
    }
  }

  &--standby {
    & #{$component-name}__status {
      @include set-icon("student-place-standby", $include-pseudo: "before");
    }
  }

  &--requirements-not-fulfilled {
    & #{$component-name}__status {
      @include set-icon("failed", $include-pseudo: "before");
    }
  }

  &--student-place-offer-accepted {
    & #{$component-name}__status {
      @include set-icon("student-place-accepted", $include-pseudo: "before");
    }
  }

  &--student-place-offer-rejected {
    & #{$component-name}__status {
      @include set-icon("student-place-rejected", $include-pseudo: "before");
    }
  }

  &--annulled {
    color: color("foreground-secondary");

    & #{$component-name}__header__content__title {
      text-decoration: line-through;
      text-decoration-color: color("border");
      text-decoration-thickness: $width-border;
    }

    & #{$component-name}__status {
      @include set-icon("delete", $include-pseudo: "before");
    }
  }


  &__header {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
    justify-items: start;

    padding: spacing($padding-vertical) spacing($padding-horizontal) spacing($padding-vertical) spacing($padding-horizontal);

    @include breakpoint("medium") {
      padding: spacing($padding-vertical) spacing($padding-horizontal-medium) spacing($padding-vertical) spacing($padding-horizontal-medium);
    }

    @include breakpoint("wide") {
      flex-direction: row;
    }

    &__content {
      &__title {
        @include set-font(1, "single", $weight: "bold");
        margin: 0;
      }

      &__area-code {
        @include set-font(-1, "single");
        color: color("foreground-secondary");
      }
    }

    &__items {
      //TODO: When Safari support gap for flexbox, set a gap of two pixels ($width-border) for rows and columns and scratch the borders on each item
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      @include set-font(-1, "multiple");
      margin-top: spacing(-4);


      @include breakpoint("medium") {
        @include set-font(0, "multiple");
      }

      @include breakpoint("wide") {
        margin-top: 0;
        margin-left: spacing(-3);
      }
    }

    &__item {
      display: flex;
      align-items: baseline;
      white-space: nowrap;
      padding: 0 spacing(-3);
      background-color: color("background");
      border-right: $width-border solid color("background-secondary");
      border-bottom: $width-border solid color("background-secondary");

      @include breakpoint("wide") {
        border-right: none;
        border-left: $width-border solid color("background-secondary");
      }
    }
  }

  &__status {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: spacing($padding-vertical) 0 spacing($padding-vertical) spacing($padding-horizontal);
    margin-right: spacing($padding-horizontal);
    border-right: $width-border-utility solid;
    border-color: inherit;

    @include breakpoint("medium") {
      align-items: center;
      flex-direction: row;

      border-right: none;
      border-left: $width-border-utility solid;
      border-color: inherit;
      margin-left: $width-border-utility * -1;
      padding: spacing($padding-vertical) spacing($padding-horizontal-medium) spacing($padding-vertical) 0;
      margin-right: spacing($padding-horizontal-medium);
    }

    @include icon-style {
      position: relative;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: font-size(0);
      line-height: line-height("single");
      align-self: start;
      z-index: $z-index-just-above-static + 1;

      width: spacing($padding-icon, $times: 2, $add: line-height("single", $include-calc: false));
      height: spacing($padding-icon, $times: 2, $add: line-height("single", $include-calc: false));
      border-radius: 50%;

      right: spacing($padding-icon, $times: -2, $subtract: "#{line-height("single", $include-calc: false)} + #{$width-border-utility}", $divideby: 2);

      @include breakpoint("medium") {
        right: unset;
        left: spacing($padding-icon, $times: -2, $subtract: "#{line-height("single", $include-calc: false)} + #{$width-border-utility}", $divideby: 2);
      }
    }


    &__content {
      flex: 1 1 auto;

      @include breakpoint("medium") {
        margin-left: spacing($padding-icon, $times: -2, $add: spacing($padding-horizontal-medium), $subtract: line-height("single", $include-calc: false));
      }
    }

    &__header {
      @include set-font(0, "single", $weight: "bold", $transform: "none");
      margin: 0;
    }

    p {
      margin: 0;
      line-height: line-height("single");

      & + p {
        margin-top: spacing(-4);
      }
    }

    & .button:not(.button--text) {
      @include set-colors("utility-interactive");
      margin-top: spacing(-4);

      &:hover{
        background-color: color("utility-interactive-hover");
      }

      &:active{
        background-color: color("utility-interactive-hover");
      }
    }

    #{$component-name}--student-place-not-offered &,
    #{$component-name}--annulled & {
      border: $width-border solid color("background");

      @include breakpoint("medium") {
        border-left-width: $width-border-utility;
      }

      &::before {
        right: spacing($padding-icon, $times: -2, $add: $width-border, $subtract: line-height("single", $include-calc: false), $divideby: 2);
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        width: $width-border-utility;
        top: 0;
        bottom: 0;
        left: $width-border-utility * -1;
        background-color: color("background-secondary");
      }
    }
  }

  &__details {
    margin: 0;
    padding: spacing($padding-vertical) spacing($padding-horizontal) 0 spacing($padding-horizontal);

    @include breakpoint("medium") {
      padding: spacing($padding-vertical) spacing($padding-horizontal-medium) 0 spacing($padding-horizontal-medium);
    }

    &__item {
      //overvrite default ul style
      padding: 0;
      line-height: line-height("single");

      &::before {
        content: none;
      }
    }

    &__value {
      display: inline-block;
      font-weight: $font-weight-bold;
    }
  }
}