/*
* @category containers
* @component modal
* @design collaboration-design
*/

@import '../../settings/core';
@import '../../settings/modal';
// We use this mixin to create the structure of modal
//
// $height - Sets modal height Default: $modal__width || 100vh
// $width - Sets modal width Default: $modal__width || 100vw
//
@mixin modal-base(
  $height: $modal__height--full-screen,
  $width: $modal__width--full-screen
) {
  position: fixed;
  right: 0;
  left: 0;
  z-index: $zindex-modal;
  display: block;
  width: $width;
  height: $height;
  margin: 0 auto;
  visibility: visible;

  @media #{$small-only} {
    min-height: $modal__height--full-screen;
  }
}

// We use this to size the modal
//
// $border-width - Width of border (i.e. 1px). Default: false
// $height - Sets modal height Default: auto
// $max-height - Sets modal max-height Default: none
// $min-height - Sets modal min-height Default: 0
// $padding - Padding to apply to reveal modal. Default: false
// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $top-offset - Default: false
// $width - Sets modal width Default: $modal__width--full-screen
@mixin modal-size(
  $border-width: false,
  $height: auto,
  $max-height: none,
  $min-height: 0,
  $padding: false,
  $radius: false,
  $top-offset: false,
  $width: $modal__width--full-screen
) {
  width: $width;

  @if $top-offset {
    top: $top-offset;
    max-height: calc(100vh - (#{$top-offset} * 2));
  } @else {
    top: auto;
    max-height: $max-height;
  }

  .#{$modal__class}__content {
    @if $min-height !=0 {
      min-height: $min-height;
    } @else {
      height: $height;
      min-height: $min-height;
    }

    @if $radius==true {
      @include radius($modal__radius);
    } @else if $radius {
      @include radius($radius);
    }

    @if $top-offset {
      max-height: calc(100vh - (#{$top-offset} * 2));
    } @else {
      max-height: $max-height;
    }

    @if $padding !=false {
      padding: $padding;
    }

    @if $border-width !=false {
      border-style: solid;
      border-width: $border-width;
    } @else {
      border: none;
    }
  }
}

// We use this to size the modal header
//
// $padding - Sets modal header padding Default: $modal-header__padding
// $line-height - Sets modal header line height Default: $modal-header__line-height
// $font-size - Sets modal header font-size Default: $modal-header__font-size
// $font-family - Sets modal header font-family (i.e. 1px). Default: $brand-font-bold
@mixin modal-header-size(
  $padding: $modal-header__padding,
  $line-height: $modal-header__line-height,
  $font-size: $modal-header__font-size,
  $font-family: $brand-font-bold
) {
  @include flex($fd: column);

  width: 100%;
  padding: $padding;
  font-family: $font-family;
  font-size: $font-size;
  line-height: $line-height;
  @content;
}

// We use this to size the modal close button
//
// $size - Sets Close Button size Default: auto
// $top-offset - Sets Close Button top offset Default: auto
// $right-offset - Sets Close Button right offset Default: auto
// $padding - Sets Close Button padding (i.e. 1px). Default: 0
// $font-size - Sets Close Button font-size Default: inherit
@mixin modal-close-button(
  $size: auto,
  $top-offset: auto,
  $right-offset: auto,
  $padding: 0,
  $font-size: inherit
) {
  top: $top-offset;
  right: $right-offset;
  width: $size;
  height: $size;
  padding: $padding;

  &:before {
    font-size: $font-size;
  }
}

// We use this to style the reveal modal defaults
//
// $bg - Sets background color of reveal modal. Default: $modal__background || $white
// $border-color - Color of border. Default: $modal__border-color.
// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
@mixin modal-color($bg: false, $border-color: false, $box-shadow: false) {
  @if $bg {
    background-color: $bg;
  }

  @if $border-color !=false {
    border-color: $border-color;
  } // We can choose whether or not to include the default box-shadow.

  @if $box-shadow {
    box-shadow: $box-shadow;
  }
}


@mixin modal-flex-container() {
  display: flex;
  width: 100%;
  max-height: inherit;
  min-height: inherit;
  flex-direction: column;
  flex: 1 1 0%;
}