// Parameters

$small-size: 100/3;
$medium-size: 100/2;
$large-size: 200/3;

$overlay-background-color: rgba(0,0,0, 0.70);
$full-margin-top: 80px;

$menu-width: 60px;
$fill-height-modal-margin: 200px;

// Mixins

@mixin set-modal-window-size($width, $type, $level) {
  &>div>[data-focus='modal-window'] {

    // Full modal type
    @if $type == 'full' {
      min-width: #{$width}vw;
      min-height: #{$width}vh;
    }

    // From menu modal type
    @if $type == 'from-menu' {
      @if $level == '0' {
        width: calc(#{$width}vw - #{$menu-width});
        left: calc(#{$menu-width} + #{$level} * #{$width}vw);
      } @else {
        min-width: #{$width}vw;
        left: calc(#{$level} * #{$width}vw);
      }
      height: 100vh;
      overflow-y: auto;

      [data-focus='modal-window'] {
        right: -#{$width}vw;
      }
    }

    // From right modal type
    @if $type == 'from-right' {
      position: fixed;
      min-width: #{$width}vw;
      height: 100vh;
      overflow-y: auto;
      right: 0;
    }
  }
}

@mixin all-modal-sizes ($type:'full', $level:'0') {
  &[data-size='small'] {
    @include set-modal-window-size($small-size, #{$type},  #{$level});
  }

  &[data-size='medium'] {
    @include set-modal-window-size($medium-size, #{$type},  #{$level});
  }

  &[data-size='large'] {
    @include set-modal-window-size($large-size, #{$type},  #{$level});
  }
}

@mixin animation-duration($duration) {
  -webkit-animation-duration: $duration;
  animation-duration: $duration;
}


// Style
[data-focus='modal-window'] {
  padding: 10px 25px;
  h1 {
    font-size: 26px;
    margin: 5px 0 15px 0;
  }
  h3 {
    font-size: 22px;
    color: #36b6b8;
  }
}

[data-focus='modal'] {

  &[data-type='full'] {

    @include all-modal-sizes();

    &>[data-focus='modal-overlay'] {
      z-index: 1002;
      display: block;
      text-align: center;
      overflow-y: auto;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;

      &>[data-focus='modal-window'] {
        display: inline-block;
        margin: $full-margin-top auto;
        text-align: left;
      }
    }
  }

  &[data-type='from-menu'] {

    &[data-level='0'] {
      @include all-modal-sizes('from-menu', '0');

      &>[data-focus='modal-overlay'] {
        z-index: 1001;

        &>[data-focus='modal-window'] {
          z-index: 1002;
        }
      }
    }

    &[data-level='1'] {
      @include all-modal-sizes('from-menu', '1');

      &>[data-focus='modal-overlay'] {
        z-index: 998;

        &>[data-focus='modal-window'] {
          z-index: 1001;
        }
      }
    }

    &[data-level='2'] {
      @include all-modal-sizes('from-menu', '2');

      &>[data-focus='modal-overlay'] {
        z-index: 999;

        &>[data-focus='modal-window'] {
          z-index: 1000;
        }
      }
    }

    &>[data-focus='modal-overlay'] {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &>[data-focus='modal-window'] {
        position: fixed;
        top:0;
      }
    }
  }

  &[data-type='from-right'] {

    @include all-modal-sizes('from-right');

    &>[data-focus='modal-overlay'] {
      z-index: 1001;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      &>[data-focus='modal-window'] {
        position: fixed;
        top:0;
      }
    }
  }

  &>[data-focus='modal-overlay'] {
    background-color: $overlay-background-color;
    @include animation-duration(0.2s);
    &[data-visible='false'] {
      visibility: collapse;
      [data-focus='modal-window'] {
        visibility: visible;
      }
    }

    &>[data-focus='modal-window'] {
      background-color: white;
      position: relative;
      /*padding: 10px;*/
      @include animation-duration(0.2s);

      i[data-focus='modal-window-close'] {
        cursor: pointer;
        position: absolute;
        top: 5px;
        right: 5px;
      }
    }
  }
}