@import 'xtend-library/src/core/overlay/_overlay.less';
@import 'xtend-library/src/core/javascript/javascript.less';
@import 'xtend-library/src/core/card/card.less';

/**
 * overlay
 */

.overlay {
  .overflow-style();
  .overlay-inner {
    border-radius: 6px;
  }
  .overlay-design {
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
  }
  .overlay-container {
    .overlay-space();
  }
  // default options
  .overlay-size-medium();
}

// preset

.overlay-screen {
  .overlay-squared();
  .overlay-close-fixed();
  .card-overlay {
    .card-squared();
    .card-noborder();
  }
  .btn-close {
    .btn-squared();
  }
  > .backdrop {
    opacity: 0 !important;
    .trans-anim-none() !important;
  }
}

[class^='overlay-position-'], [class*=' overlay-position-'] {
  .overlay-squared();
  .card-overlay {
    .card-squared();
    .card-noborder();
  }
}

.overlay-position-left {
  .overlay-container {
    width: 88%;
    max-width: 500px;
  }
}

.overlay-position-right {
  .overlay-container {
    width: 88%;
    max-width: 500px;
  }
}

// space

.overlay-space {
  // same as .container-space
  padding: 1rem;
  @media @min-sm {
    padding: 1.5rem;
  }
  @media @min-md {
    padding: 2rem;
  }
  @media @min-lg {
    padding: 3rem;
  }
  @media @min-xl {
    padding: 4rem;
  }
}

// variant

.overlay-default {
  .overlay-inner {
    .text-default();
  }
  .overlay-design {
    border-color: @shade-100;
    background: @white;
    box-shadow: @shadow-light;
  }
}

.overlay-primary {
  .overlay-inner {
    .text-inverse();
  }
  .overlay-design {
    border-color: @accent-dark;
    background: @accent;
    box-shadow: @shadow-dark;
  }
}

// size

.overlay-size-tiny {
  .overlay-inner, .card-overlay .card-content {
    max-width: 500px;
  }
}

.overlay-size-small {
  .overlay-inner, .card-overlay .card-content {
    max-width: 700px;
  }
}

.overlay-size-medium {
  .overlay-inner, .card-overlay .card-content {
    max-width: 900px;
  }
}

.overlay-size-large {
  .overlay-inner, .card-overlay .card-content {
    max-width: 1200px;
  }
}

.overlay-size-big {
  .overlay-inner, .card-overlay .card-content {
    max-width: 1600px;
  }
}

.overlay-size-full {
  .overlay-inner, .card-overlay .card-content {
    max-width: none;
  }
}

// content size

.overlay-small {
  .overlay.overlay-small();
}

.overlay.overlay-small {
  // card
  .card-overlay {
    .card-small();
    .card-block {
      padding: 2.5rem 2.5rem;
    }
  }
}

.overlay-medium {
  .overlay.overlay-small();
  @media @min-sm {
    .overlay.overlay-medium();
  }
}

.overlay.overlay-medium {
  // card
  .card-overlay {
    .card-medium();
    .card-block {
      padding: 3rem 3rem;
    }
  }
}

.overlay-large {
  .overlay.overlay-medium();
  @media @min-sm {
    .overlay.overlay-large();
  }
}

.overlay.overlay-large {
  // card
  .card-overlay {
    .card-large();
    .card-block {
      padding: 3.5rem 3.5rem;
    }
  }
}

// special

.overlay-close-fixed {
  .card-overlay > .btn-close {
    .btn-squared();
  }
}

.overlay-squared {
  .overlay-inner {
    border-radius: 0;
  }
}

.overlay-noborder {
  .overlay-design {
    border: 0;
  }
}

.overlay-disable {
  // disable animation
  .card-overlay {
    .card-disable();
  }
}

// animation

.overlay {
  .overlay-design {
    opacity: 0;
  }
  .card-overlay {
    .card-block, .card-content {
      opacity: 0;
    }
    > .btn-close {
      opacity: 0;
    }
  }
  &.in {
    animation-duration: @time-medium + @time-tiny; // needed for animation time and backdrop animation time, put max animation time
    .overlay-design {
      opacity: 1;
      transition: opacity @time-medium @ease-in;
    }
    .card-overlay {
      .card-block, .card-content {
        opacity: 1;
        transition: opacity @time-medium @ease-in @time-tiny;
      }
      > .btn-close {
        // use animation to not override .btn transitions
        .anim-zoom.in();
        animation-delay: @time-medium;
        animation-fill-mode: forwards;
        opacity: 0;
      }
    }
    > .backdrop {
      .backdrop.in();
    }
  }
  &.out {
    animation-duration: @time-small + @time-tiny; // needed for animation time and backdrop animation time, put max animation time
    .overlay-design {
      opacity: 0;
      transition: opacity @time-small @ease-out @time-tiny;
    }
    .card-overlay {
      .card-block, .card-content {
        opacity: 0;
        transition: opacity @time-small @ease-out;
      }
      > .btn-close {
        // use animation to not override .btn transitions
        .anim-zoom.out();
        animation-delay: initial;
      }
    }
    > .backdrop {
      .backdrop.out();
    }
  }
}