// From bootstrap v3.4.1
// npm install -g lessc
// lessc _modal.scss _modal.css

@use "variables.scss";
@use "utils.scss";

//
// Variables
// --------------------------------------------------
@mixin translate($x, $y) {
    -webkit-transform: translate($x, $y);
    -ms-transform: translate($x, $y); // IE9 only
    -o-transform: translate($x, $y);
    transform: translate($x, $y);
}

@mixin transition($transition) {
    -webkit-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}

@mixin transition-transform($transition) {
    -webkit-transition: -webkit-transform $transition;
    -moz-transition: -moz-transform $transition;
    -o-transition: -o-transform $transition;
    transition: transform $transition;
}

@mixin box-shadow($shadow) {
    -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
    box-shadow: $shadow;
}

// Opacity

@mixin opacity($opacity) {
    $opacity-ie: ($opacity * 100); // IE8 filter
    opacity: $opacity;
}

// Component animations
// --------------------------------------------------

// Heads up!
//
// We don't use the `.opacity()` mixin here since it causes a bug with text
// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.

.#{variables.$prefix}fade {
    opacity: 0;
    @include transition(opacity 0.15s linear);

    &.#{variables.$prefix}in {
        opacity: 1;
    }
}

$zindex-modal-background: 1040;
$zindex-modal: 1050;

variables.$line-height-base: 1.428571429; // 20/14

variables.$border-radius-base: 4px;
variables.$border-radius-large: 6px;
variables.$border-radius-small: 3px;

// Extra small screen / phone
//** Deprecated `$screen-xs` as of v3.0.1
variables.$screen-xs: 480px;
//** Deprecated `$screen-xs-min` as of v3.2.0
variables.$screen-xs-min: variables.$screen-xs;
//** Deprecated `$screen-phone` as of v3.0.1
variables.$screen-phone: variables.$screen-xs-min;

// Small screen / tablet
//** Deprecated `$screen-sm` as of v3.0.1
variables.$screen-sm: 768px;
variables.$screen-sm-min: variables.$screen-sm;
//** Deprecated `$screen-tablet` as of v3.0.1
variables.$screen-tablet: variables.$screen-sm-min;

// Medium screen / desktop
//** Deprecated `$screen-md` as of v3.0.1
variables.$screen-md: 992px;
variables.$screen-md-min: variables.$screen-md;
//** Deprecated `$screen-desktop` as of v3.0.1
variables.$screen-desktop: variables.$screen-md-min;

// Large screen / wide desktop
//** Deprecated `$screen-lg` as of v3.0.1
variables.$screen-lg: 1200px;
variables.$screen-lg-min: variables.$screen-lg;
//** Deprecated `$screen-lg-desktop` as of v3.0.1
variables.$screen-lg-desktop: variables.$screen-lg-min;

// So media queries don't overlap when required, provide a maximum
variables.$screen-xs-max: (variables.$screen-sm-min - 1);
variables.$screen-sm-max: (variables.$screen-md-min - 1);
variables.$screen-md-max: (variables.$screen-lg-min - 1);

//== Modals
//
//##

//** Padding applied to the modal body
$modal-inner-padding: 15px;

//** Padding applied to the modal title
$modal-title-padding: 15px;
//** Modal title line-height
$modal-title-line-height: variables.$line-height-base;

//** Background color of modal content area
$modal-content-bg: #fff;
//** Modal content border color
$modal-content-border-color: rgba(0, 0, 0, 0.2);
//** Modal content border color **for IE8**
$modal-content-fallback-border-color: #999;

//** Modal backdrop background color
$modal-backdrop-bg: #000;
//** Modal backdrop opacity
$modal-backdrop-opacity: 0.5;
//** Modal header border color
$modal-header-border-color: #e5e5e5;
//** Modal footer border color
$modal-footer-border-color: $modal-header-border-color;

$modal-lg: 900px;
$modal-md: 600px;
$modal-sm: 300px;

//
// Modals
// --------------------------------------------------

// .#{$prefix}modal-open      - body class for killing the scroll
// .#{$prefix}modal           - container to scroll within
// .#{$prefix}modal-dialog    - positioning shell for the actual modal
// .#{$prefix}modal-content   - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.#{variables.$prefix}modal-open {
    overflow: hidden;
}

// Container that the modal scrolls within
.#{variables.$prefix}modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;

    // Prevent Chrome on Windows from adding a focus outline. For details, see
    // https://github.com/twbs/bootstrap/pull/10951.
    outline: 0;

    // When fading in the modal, animate it to slide down
    &.#{variables.$prefix}fade .#{variables.$prefix}modal-dialog {
        @include translate(0, -25%);
        @include transition-transform(0.3s ease-out);
    }

    &.#{variables.$prefix}in .#{variables.$prefix}modal-dialog {
        @include translate(0, 0);
    }
}

.#{variables.$prefix}modal-open .#{variables.$prefix}modal {
    overflow-x: hidden;
    overflow-y: auto;
}

// Shell div to position the modal with bottom padding
.#{variables.$prefix}modal-dialog {
    position: relative;
    width: auto;
    margin: 10px;
}

// Actual modal
.#{variables.$prefix}modal-content {
    position: relative;
    background-color: $modal-content-bg;
    background-clip: padding-box;
    border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
    border: 1px solid $modal-content-border-color;
    border-radius: variables.$border-radius-large;
    @include box-shadow(0 3px 9px rgba(0, 0, 0, 0.5));
    // Remove focus outline from opened modal
    outline: 0;
}

// Modal background
.#{variables.$prefix}modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $zindex-modal-background;
    background-color: $modal-backdrop-bg;

    // Fade for backdrop
    &.#{variables.$prefix}fade {
        @include opacity(0);
    }

    &.#{variables.$prefix}in {
        @include opacity($modal-backdrop-opacity);
    }
}

// Modal header
// Top section of the modal w/ title and dismiss
.#{variables.$prefix}modal-header {
    padding: $modal-title-padding;
    border-bottom: 1px solid $modal-header-border-color;
    @include utils.clearfix();
}

// Close icon
.#{variables.$prefix}modal-header .#{variables.$prefix}close {
    margin-top: -2px;
}

// Title text within header
.#{variables.$prefix}modal-title {
    margin: 0;
    line-height: $modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .#{$prefix}modal-header and .modal-footer)
.#{variables.$prefix}modal-body {
    position: relative;
    padding: $modal-inner-padding;
}

// Footer (for actions)
.#{variables.$prefix}modal-footer {
    padding: $modal-inner-padding;
    text-align: right; // right align buttons
    border-top: 1px solid $modal-footer-border-color;
    @include utils.clearfix();

    // Properly space out buttons
    .btn + .btn {
        margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
        margin-left: 5px;
    }

    // but override that for button groups
    .btn-group .btn + .btn {
        margin-left: -1px;
    }

    // and override it for block buttons as well
    .btn-block + .btn-block {
        margin-left: 0;
    }
}

// Measure scrollbar width for padding body during modal show/hide
.#{variables.$prefix}modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

// Scale up the modal
@media (min-width: variables.$screen-sm-min) {
    // Automatically set modal's width for larger viewports
    .#{variables.$prefix}modal-dialog {
        width: $modal-md;
        margin: 30px auto;
    }

    .#{variables.$prefix}modal-content {
        @include box-shadow(0 5px 15px rgba(0, 0, 0, 0.5));
    }

    // Modal sizes
    .#{variables.$prefix}modal-sm {
        width: $modal-sm;
    }
}

@media (min-width: variables.$screen-md-min) {
    .#{variables.$prefix}modal-lg {
        width: $modal-lg;
    }
}

//== Close
//
//##
variables.$font-size-base: 14px;
$close-font-weight: bold;
$close-color: #000;
$close-text-shadow: 0 1px 0 #fff;

//
// Close icons
// --------------------------------------------------

.#{variables.$prefix}close {
    float: right;
    font-size: (variables.$font-size-base * 1.5);
    font-weight: $close-font-weight;
    line-height: 1;
    color: $close-color;
    text-shadow: $close-text-shadow;
    @include opacity(0.2);

    &:hover,
    &:focus {
        color: $close-color;
        text-decoration: none;
        cursor: pointer;
        @include opacity(0.5);
    }

    // Additional properties for button version
    // iOS requires the button element instead of an anchor tag.
    // If you want the anchor version, it requires `href="#"`.
    // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
    button {
        padding: 0;
        cursor: pointer;
        background: transparent;
        border: 0;
        -webkit-appearance: none;
        appearance: none;
    }
}
