@import "../variables";
@import '../mixins/common';
@import "../mixins/paddings";
@import "../mixins/flex";
@import "~cosmoUiVariables";


// container
$modal-container-bg: rgba(0, 0, 0, 0.5) !default;
$modal-transition-duration: all 300ms ease !default;

// popup
//$modal-fg: #646464 !default;
$modal-popup-bg: $white !default;
$modal-footer-bg: $brand-primary !default;



// modal buttons
$modal-button-fg: $brand-primary !default;
$modal-button-bg: $white !default;
$modal-button-fg-hover: darken($modal-button-fg, 5%) !default;
$modal-button-bg-hover: darken($modal-button-bg, 5%) !default;


// modal close button
$modal-close-button-size: 40px !default;
$modal-close-button-font-size: 24px !default;
// the close button isn't exactly half in half out
// it's actually a little bit further in than out
$modal-close-button-position-offest: -($modal-close-button-size / 2.7) !default;
$modal-close-button-color: $black !default;
$modal-close-button-bg-color: $white !default;


// modal content
// these are the styles relating to generic info popups
$modal-content-width: 350px !default;
$modal-content-padding: $padding-md !default;

// modal content icon
// for icons such as warning icon, or info icon etc
$modal-content-icon-size: 32px !default;
$modal-content-icon-color: $brand-primary !default;

.modalContainer {
    @extend %row-center;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: $modal-container-bg;
}

.modalPopup {
    @extend %col-center;
    position: relative;
    background-color: $modal-popup-bg;
    border-radius: 3px;
    transition: $modal-transition-duration;
}

.close {
    @extend %row-center;
    position: absolute;
    height: $modal-close-button-size;
    width: $modal-close-button-size;
    top: $modal-close-button-position-offest;
    right: $modal-close-button-position-offest;
    font-size: $modal-close-button-font-size;
    font-weight: bold;
    border-radius: 100%;
    background-color: $modal-close-button-bg-color;
    color: $modal-close-button-color;
    cursor: pointer;
}

.modalContent {
    @extend %row-center;
    width: 350px;
    padding: $modal-content-padding;
}

.modalIcon {
    min-width: $modal-content-icon-size;
    min-height: $modal-content-icon-size;
}

.modalMessage {
    padding-left: 20px;
    color: $text;
    font-size: 18px;
}