//
//  Utilities
//  _____________________________________________

.lib-modal() {
  bottom: 0;
  left: 0;
  min-width: 0;
  position: fixed;
  right: 0;
  top: 0;
  visibility: hidden;

  &._show {
    visibility: visible;

    .modal-inner-wrap {
      transform: translate(0, 0);
    }
  }

  .modal-inner-wrap {
    background-color: @modal--background-color;
    box-shadow: @modal--box-shadow;
    opacity: 1;
    pointer-events: auto;

    .lt-lg({ padding: @modal--padding-lt-lg; });

    .gt-lg({ padding: @modal--padding-gt-lg; });
  }

  .modal-header {
    padding-left: @default--space / 2;
  }

  .modal-content {
    .container-fluid;

    .lt-lg({ margin: @modal-content--margin-lt-lg 0; });

    .gt-lg({ margin: @modal-content--margin-gt-lg 0; });
  }

  .modal-footer {
    padding-left: @default--space / 2;
    padding-right: @default--space / 2;
  }
}

.lib-modal-slide() {
  left: @modal-slide--first-indent-left;
  z-index: @modal-slide--z-index;

  &._show {
    .modal-inner-wrap {
      transform: translateX(0);
    }
  }

  .modal-inner-wrap {
    height: 100%;
    overflow-y: auto;
    position: static;
    transform: translateX(100%);
    transition-duration: .3s;
    transition-property: transform, visibility;
    transition-timing-function: ease-in-out;
    width: auto;

    .lt-lg({ padding: @modal--padding-lt-lg });

    .gt-lg({ padding: @modal--padding-gt-lg });
  }

  .modal-content {
    .lt-lg({ margin: @modal-content--margin-lt-lg 0; });

    .gt-lg({ margin: @modal-content--margin-gt-lg 0; });
  }
}

.lib-modal-popup() {
  left: 0;
  overflow-y: auto;
  z-index: @modal-popup--z-index;

  &._show {
    .modal-inner-wrap {
      transform: translateY(0);
    }
  }

  .modal-inner-wrap {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    left: 0;
    margin: @modal-popup--indent-vertical auto;
    position: absolute;
    right: 0;
    transform: translateY(-200%);
    transition-duration: .2s;
    transition-property: transform, visibility;
    transition-timing-function: ease;
    width: @modal-popup--width;

    .lt-lg({ padding: @modal--padding-lt-lg; });

    .gt-lg({ padding: @modal--padding-gt-lg; });
  }

  .modal-content {
    .lt-lg({ margin: @modal-content--margin-lt-lg 0; });

    .gt-lg({ margin: @modal-content--margin-gt-lg 0; });
  }
}

//
//  Common
//  _____________________________________________

body {
  &._has-modal {
    height: 100%;
    overflow: hidden;
    width: 100%;
  }

  &._has-modal-custom {
    .modal-custom-overlay {
      height: 100vh;
      left: 0;
      position: fixed;
      top: 0;
      width: 100vw;
      z-index: @modal-overlay--z-index;
    }
  }
}

//  Modals overlay

.abs-modal-overlay {
  background-color: @modal-overlay--background-color;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.modals-overlay {
  &:extend(.abs-modal-overlay all);

  z-index: @modal-popup--z-index;
}

.modal-popup,
.modal-slide {
  button {
    &.action-close {
      margin-left: @default--space;

      span {
        .visually-hidden();
      }
    }

    &.action-primary,
    &.action.primary {
      .beyer-button;
      .beyer-button--raised;
      .beyer-button--raised-champagne;
    }

    &.action-secondary,
    &.action.secondary {
      .beyer-button;
      .beyer-button--outline;
      .beyer-button--outline-champagne;
    }

    // Override margin property for beyer-buttons (above)
    &.action-primary,
    &.action.primary,
    &.action-secondary,
    &.action.secondary {
      margin-left: 0;
    }

    &.action-close {
      margin-right: 0;
    }

    &.action-close {
      .lib-icon-as-bg(@icon--window-close, @size: @modal-popup--icon-close-size);

      background-color: @white;
      border: 0;
      display: inline-block;
      height: @modal-popup--icon-close-size;
      width: @modal-popup--icon-close-size;
    }
  }
}

.modal-custom {
  .modal-inner-wrap {
    .lt-md({ padding: @modal--padding-lt-lg; });
  }

  .modal-header {
    .lt-md({ display: flex; justify-content: flex-end; });
  }

  .modal-content {
    .lt-md({ margin: @modal-content--margin-lt-lg 0; });
  }

  .block {
    .lt-md({ &:not(:first-child) {
      &::before {
        .hr-gray-wide();
      }

      margin-top: @default--space;
    } });
  }

  button {
    &:extend(.modal-popup button all);

    &.action-close {
      .gt-md({ display: none; });
    }
  }
}

.modal-slide,
.modal-popup {
  .lib-modal();
}

.modal-slide {
  .lib-modal-slide();

  &._inner-scroll {
    .modal-inner-wrap {
      display: flex;
      flex-direction: column;
      overflow-y: visible;
    }

    .modal-header,
    .modal-footer {
      flex-grow: 0;
      flex-shrink: 0;
    }

    .modal-content {
      overflow-y: auto;
    }

    .modal-footer {
      margin-top: auto;
    }
  }

  button {
    &,
    &.action {
      &,
      &.primary,
      &.secondary {
        .lt-sm({ width: 100%; margin-right: 0; & + button {
          margin-top: @default--space;
        } });
      }
    }
  }
}

//.modal-custom,
.modal-popup {
  .lib-modal-popup();

  //  If applied, switching outer popup scroll to inner
  &._inner-scroll {
    overflow-y: visible;

    .modal-inner-wrap {
      max-height: 90%;
    }

    .modal-content {
      overflow-y: auto;
    }
  }

  .modal-header,
  .modal-footer {
    flex-grow: 0;
    flex-shrink: 0;
  }

  .modal-header {
    display: flex;
    justify-content: flex-end;
  }

  .modal-title {
    flex-grow: 1;

    .lt-lg({ .h4; margin: 0; });

    .gt-lg({ .h3; margin: 0; });
  }

  .modal-content {
    .p4;

    ul {
      .list-bullet;
      .p5;
      .light;

      margin-bottom: @default--space;
    }

    .block {
      .lt-lg({ &:not(:first-child) {
        &::before {
          .hr-gray-wide();
        }

        margin-top: @default--space;
      } });
    }

    .block-title {
      margin-bottom: @default--space;

      strong {
        .h6;

        .gt-lg({ .h4; });
      }
    }

    .actions-toolbar {
      margin-top: 0;

      a.beyer-button {
        margin-right: 0;
        margin-top: 0;
      }

      .secondary {
        a {
          color: @black-60;
        }
      }
    }

    .message {
      &.error {
        color: @secondary-red;
      }
    }
  }

  .modal-footer-actions {
    text-align: right;
  }
}

//.modal-custom {
//  .modal-inner-wrap {
//    margin: 0 auto;
//  }
//}

//
//  Mobile
//  _____________________________________________

//  Mobile transform to modal-slide
.lt-md({ .modal-popup {
  &.modal-slide {
    .lib-modal-slide();

    .modal-inner-wrap {
      margin: 0;
      max-height: none;
    }
  }
} .custom-slide {
    .lib-modal();
    .lib-modal-slide();

    &._show {
      -webkit-overflow-scrolling: touch;
      overflow-x: hidden;
      overflow-y: auto;
    }

    .modal-inner-wrap {
      background-color: @white;
      box-sizing: border-box;
      height: auto;
      min-height: 100%;
    }
  } body {
      &._has-modal-custom {
        height: 100vh;
        overflow: hidden;
        width: 100vw;

        .modal-custom-overlay {
          background-color: @modal-overlay--background-color;
        }
      }
    } });
