@import "settings.colors";
@import "settings.z-index";

@import "mixins/tools.mixins";

$c-modal-dialog-button-size: rem(40);

// Positioning and animation

.c-modal-dialog {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: $z-index-modal-dialog;
}

// when inner modal is present, outer lightbox should be click to close
.c-modal-dialog--click-close {
  cursor: pointer;
}

.c-modal-dialog--dark {
  background-color: #000;
}

.c-modal-dialog--light {
  background-color: rgba($color-grey-900, 0.9);
}

.c-modal-dialog[hidden] {
  opacity: 0;
}

.c-modal-dialog--hiding {
  // Using the short-hand "animation" rule here causes mysterious issues
  // in our production environment, so we have to be verbose
  animation-name: hide-dialog;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

.c-modal-dialog--revealing {
  // Using the short-hand "animation" rule here causes mysterious issues
  // in our production environment, so we have to be verbose
  animation-name: reveal-dialog;
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  animation-play-state: running;
}

@keyframes hide-dialog {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes reveal-dialog {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

// Controls and contents

.c-modal-dialog__inner {
  background-color: $color-white;
  outline: 1px solid $color-stone-200;
  z-index: $z-index-modal-dialog + 1;
  cursor: default;
}

.c-modal-dialog__toolbar {
  width: $c-modal-dialog-button-size;
  height: $c-modal-dialog-button-size;
  position: absolute;
  top: 0;
  right: 0;
  z-index: $z-index-modal-dialog + 2;
}

.c-modal-dialog__toolbar {
  margin-top: 1px;
  margin-right: 1px;
}

.c-modal-dialog__close-button {
  @include remove-button-appearance;
  width: $c-modal-dialog-button-size;
  height: $c-modal-dialog-button-size;
  padding: rem(9);
  border: 1px solid transparent;
  border-radius: rem(2);
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;

  &[disabled] {
    border-color: transparent;
    cursor: not-allowed;
  }
}

.c-modal-dialog__close-icon {
  width: rem(18);
  height: rem(18);
  vertical-align: text-top;
  display: inline-block;
}

.c-modal-dialog--dark {
  .c-modal-dialog__close-button {
    background-color: rgba($color-grey-900, 0.6);

    .c-modal-dialog__close-icon {
      fill: $color-white;
    }
    &:hover, &:focus {
      border-color: $color-grey-700;
      background-color: rgba($color-grey-900, 0.6);
    }
    &:active {
      border-color: $color-grey-700;
      background-color: rgba($color-grey-900, 1);
    }
  }
}

.c-modal-dialog--light {
  .c-modal-dialog__close-button {
    background-color: $color-white;

    .c-modal-dialog__close-icon {
      fill: $color-grey-300;
    }
    &:hover, &:focus {
      .c-modal-dialog__close-icon {
        fill: $color-grey-500;
      }
    }
    &:active {
      .c-modal-dialog__close-icon {
        fill: $color-grey-800;
      }
    }
  }
}

.c-modal-dialog__contents {
  height: 100%;
}

// show the scrollbar when content is long
.c-modal-dialog--scrollable,
.c-modal-dialog__contents--scrollable {
  overflow: scroll; // has to be `scroll` for momentum, not `auto`
}

// hide the scrollbar when content is long
.c-modal-dialog--touch-scrollable,
.c-modal-dialog__contents--touch-scrollable {
  overflow: scroll; // has to be `scroll` for momentum, not `auto`
  @include touch-scrollable;
}

// wrapper to center spinner
.c-modal-dialog__spinner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
