// RAMEN MODAL COMPONENT
//
//
// Required Global Variables:
// $z-modal
// $spacing-small
// $spacing-base
// $spacing-large
//
//
// Required Component Variables:
//
// $modal-background-color: Sets the modal background color
// $modal-max-width: Sets the modal max width
// $modal-overlay-background-color: Sets the modal overlay background color
//
//

$close-size: toRems(18px) !default;
$modal-background-color: $c-white !default;
$modal-max-width: 800px !default;
$modal-overlay-background-color: rgba($c-black, 0.65) !default;

@mixin modal {
  bottom: 0;
  display: flex;
  left: 0;
  overflow-x: auto;
  padding: $spacing-base;
  position: fixed;
  right: 0;
  top: 0;
  z-index: $z-modal;

  @include breakpoint($bp-medium) {
    padding: $spacing-large;
  }
}

@mixin modal-inner {
  align-items: center;
  background-color: $modal-background-color;
  margin: auto;
  max-width: $modal-max-width;
  padding: $spacing-base;
  position: relative;
  width: 100%;
  z-index: $z-modal + 1;

  @include breakpoint($bp-medium) {
    padding: $spacing-large;
  }
}

@mixin modal-close {
  font-size: $close-size;
  padding: $spacing-xsmall;
  position: absolute;
  right: $spacing-xxsmall;
  top: 0;

  &:hover,
  &:focus {
    opacity: 0.5;
  }
}

@mixin modal-overlay {
  background: $modal-overlay-background-color;
  bottom: 0;
  content: '';
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: $z-modal - 1;
}

.c-modal {
  @include transition-hide(scale(0.9));
  @include modal;

  &__inner {
    @include modal-inner;
  }

  &__close {
    @include modal-close;
  }

  &.is-visible {
    @include transition-show;
  }
}

// Body overlay
body {
  &.has-overlay {
    overflow: hidden;

    &:after {
      @include transition-show;
    }
  }

  &:after {
    @include transition-hide;
    @include modal-overlay;
  }
}