/*------------------------------------*\
    $MODAL
\*------------------------------------*/

// Body backgrounds
body,
html {
  &.a-modal-background-success {
    background: $green-light;
  }

  &.a-modal-background {
    background: $oldblue;
  }

  &.a-modal-background-error {
    background: $red-light;
  }
}


.a-page {
  .a-modal {
    min-height: 100vh;
  }
}

body {
  &.modal-open {
    overflow-y: hidden;
  }
}

.a-modal {
  position: fixed;
  padding-right: 0 !important; // overwriting bootstrap
  padding-bottom: $spacer * 5;

  .a-iconText  {
    min-height: $spacer * 6;
    @include media-breakpoint-up( md ) {
      height: auto;
    }

    &.a-iconText-background {
      padding: 0 $spacer 0 $spacer * 0.5;

      @include media-breakpoint-up( md ) {
        padding: $spacer;
      }
    }

    .a-iconText-text {
      max-width: calc(100% - 100px);
      padding-top: $spacer;
      padding-bottom: $spacer;
      @include media-breakpoint-up( md ) {
        padding-top: 0;
        padding-bottom: 0;
      }

      .a-iconText-text-small {
        overflow-x: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .a-modal-top-logo {
    opacity: 0.7;
  }

  .container {
    @include media-breakpoint-down( lg ) {
      padding: 0;
    }
  }

  .modal-lg {
    width: auto;
    max-width: none;
    margin: 0 $spacer;

    @media screen and (min-width: 920px) {
      margin: auto;
    }
  }

  .modal-content {
    margin-bottom: $spacer * 5;
    border: none;
    border-radius: 0;
    box-shadow: $shadow;
  }

  .a-link-helpfunction {
    color: $white;
    text-align: center;

    a,
    .a-link-chat {
      color: $white;
      border-color: $white;
    }

    i {
      margin-top: -10px;
    }
  }

  .a-modal-contentFullWidth {
    width: calc(100% + 47px);
    margin-left: -$spacer * 2;

    @include media-breakpoint-up(md) {
      width: calc(100% + 168px);
      margin-left: -84px;
    }

    @include media-breakpoint-up(lg) {
      width: calc(100% + 191px);
      margin-left: -95px;
    }

    .a-legend {
      padding: 0 $spacer * 2;

      @include media-breakpoint-up(md) {
        padding: 0 84px;
      }

      @include media-breakpoint-up(lg) {
        padding: 0 96px;
      }
    }

    .custom-radio {
      padding: $spacer $spacer $spacer $spacer * 5;

      @include media-breakpoint-up(md) {
        padding: $spacer $spacer * 10;
      }

      @include media-breakpoint-up(lg) {
        padding: $spacer $spacer * 11;
      }
    }

    .custom-control-indicator {
      left: $spacer * 2;

      @include media-breakpoint-up(md) {
        left: 84px;
      }

      @include media-breakpoint-up(lg) {
        left: 96px;
      }
    }
  }

  .a-personSwitcher-name {
    display: inline-block;
    max-width: 220px;
    letter-spacing: $font-letter-spacing;
  }

  .a-page {
    position: absolute;
    width: 100%;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.3, 1, 0.5, 1);

    &.a-next-page {
      transform: translate3d(180%, 0, 0);
    }

    &.a-current-page {
      position: absolute;
      top: 0;
      pointer-events: inherit;
      visibility: visible;
      transform: translate3d(0, 0, 0);
    }

    &.a-previous-page {
      transform: translate3d(-180%, 0, 0);
    }
  }

  &.fade {
    overflow-x: hidden;
    overflow-y: scroll;
    opacity: 1;
    transition: none;

    .modal-dialog {
      transition: all 0.7s cubic-bezier(0.3, 1, 0.5, 1);
      transform: translate3d(180%, 0, 0);
    }

    &.show {
      .modal-dialog {
        transition: all 0.7s cubic-bezier(0.3, 1, 0.5, 1);
        transform: translate3d(0, 0, 0);
      }
    }

    &.a-fade--appear {
      .modal-dialog {
        transition: all 0.7s;
        transform: translate3d(0, 0, 0);
      }

      &.show {
        .modal-dialog {
          transition: all 0.7s;
          transform: translate3d(0, 0, 0);
        }
      }
    }
  }
}

.a-modal-content-target {
  position: relative;
}

// Modal top
.a-modal-top {
  min-height: $spacer * 4;
  padding-top: $spacer * 3;

  .a-logo {
    @include media-breakpoint-up( lg ) {
      max-width: 142px;
    }

    float: left;
    max-width: 110px;
    margin-right: $spacer;
  }

  .a-modal-top-user {
    position: relative;
    float: right;
    margin-top: 1px;
    margin-right: 3px;

    .a-personSwitcher {
      width: 280px;
      padding: 0;
      margin-top: -2px;
      margin-right: -3px;
      color: $black-opacity-07;
      cursor: not-allowed;
    }

    .a-personSwitcher-icon {
      color: $black-opacity-07;
      letter-spacing: $font-letter-spacing;
    }
  }
}

.a-modal-navbar {
  height: 48px;
  margin-top: 36px;
}

.a-modal-header {
  min-height: $spacer * 5;
  padding: 0;
  border: none;

  @include media-breakpoint-up( md ) {
    min-height: $spacer * 7;
  }

  h1 {
    line-height: 1;
    @include media-breakpoint-up( md ) {
      line-height: 1.5;
    }
  }
}

.a-modal-title {
  @include a-fontSize18;
  position: relative;
  display: table-cell;
  width: 100%;
  min-height: 96px;
  margin: 0;
  color: $white;
  vertical-align: middle;

  @include media-breakpoint-up( md ) {
    @include a-fontSize24;
  }
}

.a-modal-body {
  padding: $spacer * 2 $spacer;
  border-bottom: 1px solid $grey-medium;

  &:last-of-type {
    border-bottom: none;
  }

  @include media-breakpoint-up( md ) {
    padding: 36px 84px;
  }
  @include media-breakpoint-up( lg ) {
    padding: $spacer * 3 $spacer * 8;
  }

  .a-btn-group {
    margin-top: $spacer * 3;
  }

  .a-modal-receiptContent {
    ul {
      margin: $spacer * 2 0 $spacer * 2 $spacer * 3;

      &.a-modal-receiptContent-fullWidth {
        margin: 0 0 $spacer * 2 0;
      }
    }
  }
}

.a-modal-close,
.a-modal-back {
  padding: 0;
  margin-bottom: 12px;
  pointer-events: auto;
  cursor: pointer;
  border: none;
  border-radius: 50%;

  &:hover {
    border: none;
    opacity: 0.7;
  }

  &:focus {
    background: $blue-light;
    border: none;
    outline: 3px solid $blue-darker;
  }

  span {
    &.ai-stack,
    &.reg-stack {
      i {
        line-height: 1em;

        &:first-of-type {
          color: $white;
        }
      }
    }
  }
}

.a-modal-close {
  float: right;
}

a {
  &.a-modal-close {
    padding-top: 6px;
    text-align: center;
  }
}

.a-modal-close-icon {
  margin-top: -1px;
  color: $red;
}

.a-modal-footer {
  padding: 0 $spacer * 8 $spacer * 3 $spacer * 8;
}

/*------------------------------------*\
    $MODAL PROCESS
\*------------------------------------*/
.a-modal-background-success,
.a-modal-background-error {
  .a-modal-navbar {
    button {
      display: none;
    }
  }

  &.a-displayNav {
    .a-modal-navbar {
      button {
        display: inline-block;
      }
    }
  }

  .a-iconText {
    &.a-iconText-background {
      color: $black;
    }
  }
}

// MODAL WITH SUCCESS
.a-modal-background-success {
  .modal-backdrop {
    background: $green-light;
  }

  .a-modal-top {
    .a-personSwitcher {
      color: $black;
    }
  }

  .a-iconText-background {
    background: $green;

    .a-iconText-text  {
      color: $black;
    }
  }

  .a-link-helpfunction {
    color: $black;

    a {
      color: $black;
      border-color: $black;
    }
  }

}

// MODAL WITH ERROR
.a-modal-background-error {
  .modal-backdrop {
    background: $red-light;
  }

  .a-modal-top {
    .a-personSwitcher {
      color: $black;
    }
  }

  .a-iconText-background {
    background: $red;

    .a-iconText-text {
      color: $black;
    }
  }

  .a-link-helpfunction {
    color: $black;

    a {
      color: $black;
      border-color: $black;
    }
  }
}