// Lightning Design System 2.3.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @name base
 * @selector .slds-modal
 * @restrict section
 * @variant
 */
.slds-modal {
  opacity: 0;
  visibility: hidden;
  transition:
    transform $duration-quickly linear,
    opacity $duration-quickly linear;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: ($z-index-modal + 1);

  /**
   * Centers and sizes the modal horizontally and confines modal within viewport height
   *
   * @selector .slds-modal__container
   * @restrict .slds-modal div
   * @notes This should be nested immediately inside `.slds-modal` with nothing else nested on the same level.
   * @required
   */
  &__container {
    position: relative;
    transform: translate(0, 0);
    transition:
      transform $duration-quickly linear,
      opacity $duration-quickly linear;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 $spacing-x-large;
    height: 100%;
    padding: $square-icon-large-boundary 0;
    border-radius: $border-radius-medium;

    @include mq-medium-min {
      margin: 0 auto;
      width: 50%;
      max-width: 40rem; // TODO: Tokenize
      min-width: 20rem; // TODO: Tokenize
    }
  }

  &__header,
  &__content {
    background: $color-background-alt;
  }

  &__header,
  &__footer {
    flex-shrink: 0;
  }

  /**
   * Creates the Modal Header container.
   *
   * @selector .slds-modal__header
   * @restrict .slds-modal header
   * @notes This should be nested immediately inside `.slds-modal__container` as the first element.
   * @required
   */
  &__header {
    position: relative;
    border: {
      top: {
        right-radius: $border-radius-medium;
        left-radius: $border-radius-medium;
      }
      bottom: $border-width-thick solid $color-border;
    }
    padding: $spacing-medium;
    text-align: center;

    + .slds-modal__menu {
      border-top: {
        left-radius: 0;
        right-radius: 0;
      }
    }
  }

  /**
   * Use when modal header has no content
   *
   * @selector .slds-modal__header_empty
   * @restrict .slds-modal__header
   */
  &__header_empty,
  &__header--empty {
    padding: 0;
    border-bottom: 0;
  }

  &__header_empty + .slds-modal__content,
  &__header--empty + .slds-modal__content {
    border: {
      top: {
        right-radius: $border-radius-medium;
        left-radius: $border-radius-medium;
      }
    }
  }

  /**
   * Creates the scrollable content area for the modal.
   *
   * @selector .slds-modal__content
   * @restrict .slds-modal div
   * @required
   */
  &__content {
    @include hyphenate;
    overflow: hidden {
      y: auto;
    }

    &:last-child {
      border-bottom: {
        right-radius: $border-radius-medium;
        left-radius: $border-radius-medium;
      }
      box-shadow: $shadow-drop-down;
    }
  }

  /**
   * Creates the shaded menu area for the modal.
   *
   * @selector .slds-modal__menu
   * @restrict .slds-modal div
   * @notes Either `.slds-modal__menu` or `.slds-modal__content` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`.
   * @required
   */
  &__menu {
    position: relative;
    border-radius: $border-radius-medium;
    padding: $spacing-medium;
    background-color: $color-background;

    @include mq-medium-max {

      .slds-button {
        width: 100%;
        margin: $spacing-xxx-small 0;
      }
    }
  }

  /**
   * Creates the Modal Footer container.
   *
   * @selector .slds-modal__footer
   * @restrict .slds-modal footer
   * @notes This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__container`. Nothing should follow it. Note that by default, elements will be aligned to the right.
   * @required
   */
  &__footer {
    border: {
      top: $border-width-thick solid $color-border;
      bottom: {
        right-radius: $border-radius-medium;
        left-radius: $border-radius-medium;
      }
    }
    padding: $spacing-small $spacing-medium;
    background-color: $color-background;
    text-align: right;
    box-shadow: $shadow-drop-down;

    /**
     * Makes buttons inside the footer spread to both left and right.
     *
     * @selector .slds-modal__footer_directional
     * @restrict .slds-modal__footer
     * @notes This is only needed when you have two buttons that indicate a back and forward navigation.
     * @modifier
     * @group direction
     */
    &_directional .slds-button:first-child,
    &--directional .slds-button:first-child {
      float: left;
    }

    .slds-button + .slds-button {
      margin-left: $spacing-x-small;
    }
  }

  /**
   * Positions the close button to the top right outside of the modal.
   *
   * @selector .slds-modal__close
   * @restrict .slds-modal button
   * @notes Either `.slds-modal__content` or `.slds-modal__menu` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`.
   * @required
   */
  &__close {
    @include square($square-icon-medium-boundary);
    position: absolute;
    top: ($square-icon-medium-boundary * -1.25);
    right: ((($square-icon-medium-boundary - $square-icon-medium-content) / 2) * -1);
  }
}

@mixin backdrop {
  // Mixin created to not have to paste this again into the new class it's being renamed to (see below)
  @include duration-slowly;
  @include square(100%);
  opacity: 0;
  visibility: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: $color-background-temp-modal-tint;
  z-index: $z-index-modal;

  /**
   * Allows the backdrop to be visible.
   *
   * @selector .slds-backdrop_open
   * @restrict .slds-backdrop
   * @notes Apply this class to a modal backdrop with JavaScript to make it visible.
   * @modifier
   * @required
   */
  &_open,
  &--open {
    visibility: visible;
    opacity: 1;
    transition: opacity $duration-slowly linear;
  }
}

/**
 * Widens the modal to take more horizontal space
 *
 * @selector .slds-modal_large
 * @restrict .slds-modal
 * @modifier
 * @group size
 */
.slds-modal_large .slds-modal__container,
.slds-modal--large .slds-modal__container {

  // TODO: We'll want to readdress this to do the .99 thing
  @include mq-medium-min {
    width: 90%;
    max-width: none;
    min-width: 40rem; // TODO: Tokenize
  }
}

// old class
.slds-modal-backdrop {
  @include deprecate('4.0.0') {
    @include backdrop;
  }
}

/**
 * Creates the shaded backdrop used behind the modal.
 *
 * @selector .slds-backdrop
 * @restrict .slds-modal ~ div
 * @notes This should follow after the `.slds-modal` as an empty element.
 * @required
 */
.slds-backdrop {
  // new class
  @include backdrop;
}

/**
 * Allows the modal to be visible.
 *
 * @selector .slds-fade-in-open
 * @restrict .slds-modal
 * @notes Apply this class to a modal with JavaScript to make it visible.
 * @modifier
 * @group animation
 */
.slds-fade-in-open {
  opacity: 1;
  visibility: visible;
  transition: opacity $duration-quickly linear;

  .slds-modal__container-reset {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
  }
}

/**
 *
 *
 * @selector .slds-slide-up-open
 * @restrict .slds-modal
 * @modifier
 * @group animation
 */
.slds-slide-up-open {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition:
    opacity $duration-quickly linear,
    transform $duration-promptly linear;

  .slds-modal__container-reset {
    opacity: 0;
    visibility: hidden;
    transform: translate(0, $spacing-medium);
    transition:
      opacity $duration-promptly linear,
      transform $duration-promptly linear;
  }
}

/**
 *
 *
 * @selector .slds-slide-up-saving
 * @restrict .slds-modal
 * @modifier
 * @group animation
 */
.slds-slide-up-saving {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -$spacing-medium);
}

/**
 *
 *
 * @selector .slds-slide-down-cancel
 * @restrict .slds-modal
 * @modifier
 * @group animation
 */
.slds-slide-down-cancel {
  opacity: 1;
  visibility: visible;
  transform: translate(0, $spacing-medium);
}