.o-modal {
  display: none;
  width: 100%;
  height: 100%;

  position: fixed;
  // Highest z-index on the axa website
  z-index: 3000;
  left: 0;
  top: 0;

  @media (min-width: $breakpoint-xs) {
    align-items: center;
  }

  &--open {
    display: flex;
    justify-content: flex-end;
    flex-flow: column;

    animation: fade $transition-large-expanding $decelerated-easing 1 forwards;

    @keyframes fade {
      0% {
        background-color: rgba($color-black, 0);
      }
      100% {
        background-color: rgba($color-black, 0.5);
      }
    }

    @media (min-width: $breakpoint-xs) {
      justify-content: center;
    }
  }

  &__container {
    display: flex;
    justify-content: flex-end;
    flex-flow: column;
    max-height: 100vh;
    width: 100%;

    animation: slide-in $transition-large-expanding $decelerated-easing 1
      forwards;

    @keyframes slide-in {
      0% {
        transform: translateY(100vh);
      }
      100% {
        transform: translateY(0%);
      }
    }

    @media (min-width: $breakpoint-xs) {
      max-height: none;
      max-width: 780px;
      margin: 0;
    }

    &--small {
      @media (min-width: $breakpoint-xs) {
        max-width: 500px;
        margin: 0;
      }
    }
  }

  &__upper-close-container {
    display: flex;
    justify-content: flex-end;
    position: relative;
    //prevents a weird bug with flex-box
    min-height: 56px;
    margin: $spacing-2 $spacing-2 0;
    box-shadow: $box-shadow-default;
    border-radius: $spacing-2 $spacing-2 0 0;
    background-color: $color-prim-white;

    @media (min-width: $breakpoint-xs) {
      height: auto;
    }

    &--forced {
      display: none;
    }

    &-button {
      cursor: pointer;
      border: none;
      background: transparent;
      outline: none;
      color: inherit;
      font: inherit;
      line-height: normal;
      margin: $spacing-2;
      height: $spacing-7;
      padding: $spacing-2;

      svg {
        color: $color-axa-blue;
        height: 24px;
        width: 24px;
      }
    }
  }

  &__content {
    max-height: 100%;
    overflow: auto;
    padding: 0 $spacing-6 $spacing-6;
    margin: 0 $spacing-2 $spacing-2;
    background-color: $color-prim-white;
    border-radius: 0 0 $spacing-2 $spacing-2;
    box-shadow: $box-shadow-high;

    @media (min-width: $breakpoint-xs) {
      max-height: 70vh;
    }

    &--forced {
      border-radius: $spacing-2;
      padding: $spacing-6;
      margin-top: $spacing-2;
      @media (min-width: $breakpoint-xs) {
        padding: $spacing-7;
      }
    }

    &--noheader {
      border-radius: $spacing-2;
      padding: 0;

      @media (min-width: $breakpoint-xs) {
        overflow-y: scroll;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }
    }

    .o-modal__upper-close-container-button {
      position: absolute;
      right: 9px;
      z-index: 1;

      svg {
        color: $color-prim-white;
        filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.8));

        @media (min-width: $breakpoint-xs) {
          color: $color-axa-blue;
          filter: unset;
        }
      }
    }
  }

  &__close {
    display: flex;
    justify-content: flex-end;
    flex-flow: column;

    &--background {
      animation: fadeOut $transition-large-colapsing $accelerated-easing;

      @keyframes fadeOut {
        0% {
          background-color: rgba($color-black, 0.5);
        }
        100% {
          background-color: transparent;
        }
      }
    }

    &--container {
      animation: close $transition-large-colapsing $accelerated-easing;

      @keyframes close {
        0% {
          transform: translateY(0);
        }
        100% {
          transform: translateY(100vh);
        }
      }
    }
  }
}
