/**
 *  components: modal
 *
 *  <div class="modal">
 *      <div class="panel">
 *
 *      </div>
 *  </div>
 *
 *  @author Björn Hase, Tentakelfabrik
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://github.com/tentakelfabrik/crispy-css
 *
 */

$crispy__modal__max-width-breakpoints: (
    $crispy__md: 50%
) !default;

$crispy__modal__margin-breakpoints: (
    $crispy__md: 0.75em
) !default;

$crispy__modal__z-index: zIndex('modal') !default;

@mixin crispy__modal {
    .modal {
        position: absolute;
        z-index: $crispy__modal__z-index;
        width: 100%;

        margin: 0;

        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);

        // make sure that on smartphones modal uses full width
        @include crispy__media__breakpoints('max-width', $crispy__modal__max-width-breakpoints);

        &--fixed {
            position: fixed;
        }

        &--bottom-left, &--top-left, &--center-left {
            left: 0;
        }

        &--bottom-right, &--top-right, &--center-right {
            right: 0;
            left: unset;
        }

        &--bottom-left,
        &--top-left,
        &--bottom-right,
        &--top-right,
        &--bottom-center,
        &--top-center,
        &--center-right,
        &--center-left {
            transform: translate(0, 0);
            @include crispy__media__breakpoints('margin', $crispy__modal__margin-breakpoints);
        }

        &--bottom-left, &--bottom-right, &--bottom-center {
            bottom: 0;
            top: unset;
        }

        &--center-right, &--center-left {
            transform: translate(0, -50%);
            margin-top: 0;
            margin-bottom: 0;
        }

        &--bottom-center, &--top-center {
            transform: translate(-50%, 0);
        }

        &--top-left, &--top-right, &--top-center {
            top: 0;
        }
    }
}