/* Components :: Modal :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.o-modal {
  @include fixed(top 0 left 0 right 0 bottom 0);
  @include flex($align-items: center, $justify-content: center);

  background-color: transparent;
  content: '';
  opacity: 0;
  visibility: hidden;
  z-index: z('modal');
  transition: background-color 720ms cubic-bezier(0.4, 0.14, 1, 1),
    opacity 240ms cubic-bezier(0.4, 0.14, 1, 1),
    z-index 720ms cubic-bezier(0.4, 0.14, 1, 1),
    visibility 240ms cubic-bezier(0.4, 0.14, 1, 1);

  &.is-visible {
    background-color: rgba(fabric-color(medium-grey), 0.5);
    opacity: 1;
    transition: background-color 720ms cubic-bezier(0, 0, 0.3, 1),
      opacity 240ms cubic-bezier(0, 0, 0.3, 1),
      z-index 720ms cubic-bezier(0, 0, 0.3, 1),
      visibility 240ms cubic-bezier(0, 0, 0.3, 1);
    visibility: visible;
    z-index: z('heaven');
  }

  &__container {
    @include fabric-size(auto);

    display: flex;
    flex-direction: column;
    max-height: 100%;
    max-width: 768px;
    overflow: hidden;
    position: relative;
    transform-origin: top center;
    transform: translate3d(0, -24px, 0);
    transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);

    .o-modal.is-visible & {
      transition: transform 240ms cubic-bezier(0, 0, 0.3, 1),
        -webkit-transform 240ms cubic-bezier(0, 0, 0.3, 1);
      transform: translate3d(0, 0, 0);
    }
  }

  &__close {
    @include absolute(top 0 right 0);
    @include fabric-size(auto);

    background-color: transparent;
    cursor: pointer;
    overflow: hidden;
    padding: $fabric-global-spacing-unit-small;
    transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
  }
}