@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$modal-overlay-color: rgba(map-get($denali-grey-colors,"400"), 0.9) !default;
$modal-corner-radius: $border-radius-sm !default;
$modal-modal-container-bg-color: map-get($denali-grey-colors,"100") !default;
$modal-modal-container-border-color: map-get($denali-grey-colors,"400") !default;
$modal-modal-container-border-width: 2px !default;
$modal-modal-container-border-style: solid !default;
$modal-modal-container-close-icon-color: map-get($denali-grey-colors,"800") !default;

@mixin modals-default {
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $elevation-modal-background;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-in;
    -moz-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in;
    pointer-events: none;
    background: $modal-overlay-color;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;

    div.modal-container {
      width: 450px;
      margin: 20px;
      position: relative;
      background: $modal-modal-container-bg-color;
      box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
      border-width: $modal-modal-container-border-width;
      border-style: $modal-modal-container-border-style;
      border-color: $modal-modal-container-border-color;
      border-radius: $modal-corner-radius;
      display: flex;
      flex-direction: column;

      .close {
        color: $modal-modal-container-close-icon-color;
        opacity: .4;
        line-height: 14px;
        position: absolute;
        z-index: $elevation-modal;
        right: 14px;
        top: 14px;
      }

      .close:hover {
        color: $modal-modal-container-close-icon-color;
        opacity: .6;
      }

      div.modal-content {
        padding: 24px 30px 24px 30px;
      }

      div.modal-header {
        border-bottom-width: $modal-modal-container-border-width;
        border-bottom-style: $modal-modal-container-border-style;
        border-bottom-color: $modal-modal-container-border-color;
        display: flex;
        align-items: center;
        padding: 15px 58px 13px 30px;
        width: 100%;
      }

      div.modal-footer {
        border-top-width: $modal-modal-container-border-width;
        border-top-style: $modal-modal-container-border-style;
        border-top-color: $modal-modal-container-border-color;
        margin-bottom:0px;
        display: flex;
        align-items: center;
        padding: 20px 30px 20px 30px;
        width: 100%;
      }

      &.is-full {
        width: 100%;
        height: 100%;
        box-shadow: none;
        border: none !important;
        border-radius: 0px !important;
        margin: 0px;
        padding: 0px;

        div.modal-content {
          padding: 24px 58px 24px 58px;
          height: 100%;
          overflow-y: scroll;
        }
      }
    }
  }
  
  .modal:target,
  .modal.is-active {
    opacity:1;
    pointer-events: auto;
  }

  @include media-size-down(tablet) {
    .modal {
      div.is-full {
        div.modal-content {
          padding: 24px 30px 24px 30px;
        }
      }
    }
  }
}

@mixin modals-theme {
  .modal {
    background: $modal-overlay-color;

    div.modal-container {
      background: $modal-modal-container-bg-color;
      border-width: $modal-modal-container-border-width;
      border-style: $modal-modal-container-border-style;
      border-color: $modal-modal-container-border-color;
      border-radius: $modal-corner-radius;

      .close {
        color: $modal-modal-container-close-icon-color;
      }

      .close:hover {
        color: $modal-modal-container-close-icon-color;
      }

      div.modal-header {
        border-bottom-width: $modal-modal-container-border-width;
        border-bottom-style: $modal-modal-container-border-style;
        border-bottom-color: $modal-modal-container-border-color;
      }

      div.modal-footer {
        border-top-width: $modal-modal-container-border-width;
        border-top-style: $modal-modal-container-border-style;
        border-top-color: $modal-modal-container-border-color;
      }
    }
  }
}