/**
 * Modal.
 *
 * Overrides for Bootstrap's default modal styles.
 */

.modal {

}

/**
 * Modal Backdrop
 */
.modal-backdrop {
  background-color: color(var(--color-button-secondary-background) l(+ 42%));
}
.modal-backdrop.in {
  opacity: 1;
}

/**
 * Modal Content
 */

@media (min-width: 768px) {
  .modal-dialog {
    width: 400px;
  }
  .modal-header,
  .modal-body {
    padding-right: 2em;
    padding-left: 2em;
  }
  .modal-body {
    padding-bottom: 1.5em;
  }
}

.modal-content {
  border: none;
  border-radius: var(--border-radius);
  box-shadow: none;
  font-size: var(--font-size);
  line-height: var(--line-height);

  @media (min-width: 768px) {
    box-shadow:
      0 2px 4px rgba(0, 0, 0, .05),
      0 2px 20px rgba(0, 0, 0, .05);
  }
}

.modal-header {
  border-bottom: none;
  padding-top: 1.75em;
  padding-bottom: .5em;
  text-align: center;
}

.modal-title {
  font-size: 128.57%; /* 18px */
  line-height: inherit;
  color: #264150;
  font-weight: 600;
}

/**
 * Close button.
 */
.modal-header .close {
  font-size: 100%;
  font-weight: inherit;
  height: 4em;
  margin: 0;
  opacity: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 4em;

  &:focus {
    outline: none;

    & span {
      border-color: var(--color-input-border);
    }
  }
  &:hover,
  &:active {
    & span {
      background: var(--color-input-border);
      border-color: var(--color-input-border);

      &:before,
      &:after {
        border-color: #fff;
      }
    }
  }

  & span {
    border-radius: 50%;
    border: thin solid;
    color: transparent;
    display: block;
    height: 2.5em;
    left: .75em;
    position: absolute;
    text-shadow: none;
    transition-duration: var(--transition-duration);
    transition-property: background, border-color;
    top: .75em;
    width: 2.5em;

    &:before,
    &:after {
      border-color: var(--color-input-border);
      border-style: solid;
      content: '';
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transition: border-color var(--transition-duration);
    }
    &:before {
      border-width: 0 0 1px;
      margin: 0 0 0 -10px;
      width: 21px;
    }
    &:after {
      border-width: 0 1px 0 0;
      margin: -10px 0 0;
      height: 21px;
    }
    &:before,
    &:after {
      transform: rotate(45deg);
    }
  }
}

/**
 * Modal Body (form elements)
 */
.modal-body {
  & .form-group {
    margin-bottom: 1em;
    position: relative;
  }
  & div.row {
    margin-bottom: 0;
  }

  /* Alerts */
  & .alert:only-child {
    margin-bottom: 2em;
  }

  /* Buttons */
  & .form-btns {
    @media (min-width: 768px) {
      margin-top: 2em;
    }

    & .btn + .btn {
      margin-left: .5em;
    }
  }

  & .btn-link {
    color: var(--color-button-secondary-background);
    transition-property: box-shadow;

    &:active,
    &:focus,
    &:hover {
      color: var(--color-button-primary-background);
    }
    &:active,
    &:hover {
      text-decoration: underline;
    }
  }

  /* Help block */
  & .form-group {
    @media (min-width: 768px) {
      position: relative;
    }
  }
  & .help-block {
    position: relative;

    @media (min-width: 768px) {
      margin: 0 0 0 7px;
      left: 100%;
      position: absolute;
      top: 2.6em;
      white-space: pre;
    }

    &:before {
      border-color: transparent;
      border-width: 0 5px 5px;
      border-style: solid;
      content: '';
      height: 0;
      display: block;
      position: absolute;
      top: -5px;

      @media (min-width: 768px) {
        border-width: 6px 6px 6px 0;
        left: -6px;
        margin: -6px 0 0 0;
        top: 50%;
      }
    }
  }
}

/* animations */
@media (min-width: 768px) {
  .modal-body form > * {
    opacity: .5;
    transform: translateY(-30px);
    transition-duration: 250ms;
    transition-property: opacity, transform;
    transition-timing-function: ease-out;
  }
  .modal-body form *:nth-child(1) {
    transition-delay: 50ms - 25ms;
  }
  .modal-body form *:nth-child(2) {
    transition-delay: calc(2 * 50ms - 25ms);
  }
  .modal-body form *:nth-child(3) {
    transition-delay: calc(3 * 50ms - 25ms);
  }
  .modal-body form *:nth-child(4) {
    transition-delay: calc(4 * 50ms - 25ms);
  }
  .modal-body form *:nth-child(5) {
    transition-delay: calc(5 * 50ms - 25ms);
  }
  .modal-body form *:nth-child(6) {
    transition-delay: calc(6 * 50ms - 25ms);
  }
  .in .modal-body form > * {
    opacity: 1;
    transform: translateY(0);
  }
}

/**
 * Modal help link.
 */
.modal-help-link {
  bottom: 0;
  display: block;
  height: 4em;
  position: absolute;
  right: 0;
  width: 4em;

  & span {
    border: thin solid transparent;
    border-radius: 50%;
    color: var(--color-button-secondary-background);
    display: block;
    font-size: calc(var(--modal-help-link-scale) * 100%);
    height: calc(2.5em / var(--modal-help-link-scale));
    left: calc(.75em / var(--modal-help-link-scale));
    line-height: calc(2.5em / var(--modal-help-link-scale));
    position: absolute;
    transition-duration: var(--transition-duration);
    transition-property: background, border-color, color;
    text-align: center;
    top: calc(.75em / var(--modal-help-link-scale));
    width: calc(2.5em / var(--modal-help-link-scale));
  }

  &:focus span {
    border-color: var(--color-button-primary-background);
    color: var(--color-button-primary-background);
  }
  &:hover,
  &:active {
    & span {
      background: var(--color-button-primary-background);
      border-color: var(--color-button-primary-background);
      color: #fff;
    }
  }
}


/**
 * Form success/error states
 */
.modal-body {
  & .has-error .help-block:before {
    border-bottom-color: var(--color-error);

    @media (min-width: 768px) {
      border-bottom-color: transparent;
      border-right-color: var(--color-error);
    }
  }
  & .has-success .help-block:before {
    border-bottom-color: var(--color-success);

    @media (min-width: 768px) {
      border-bottom-color: transparent;
      border-right-color: var(--color-success);
    }
  }
}

/**
 * Expanding form group.
 *
 * TODO: Refactor into reusable component.
 */
.form-group-expanding {
  max-height: 5em;
  opacity: 1;
  transition-duration: 200ms;
  transition-property: max-height;
  visibility: visible;

  &.is-hidden {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }
}

/**
 * Individual styles.
 */
.modal-login {
  @media (min-width: 768px) {
    & .modal-body {
      padding-bottom: 1em;
    }
  }

  & .form-btns {
    align-items: center;
    display: flex;
    flex-direction: column;

    & .btn + .btn {
      margin-top: .25em;
      margin-left: 0;
    }
  }
}

/**
 * Static modal.
 */
.modal-static > .btn.btn-link {
  color: var(--color-input-border);
  font-size: var(--font-size);
  line-height: var(--line-height);
  margin: .5em 0 0;
  text-decoration: none;

  &:focus,
  &:hover,
  &:active {
    color: var(--color-button-secondary-background);
    text-decoration: none;
  }
}

/**
 * Form loading state.
 */
.modal-body .is-loading {
  position: relative;

  & .indicator {
    animation: modal-rotate 2000ms linear infinite;
    display: inline-block;
    height: var(--indicator-width);
    left: 50%;
    margin: calc(-.5 * var(--indicator-width)) 0 0 calc(-.5 * var(--indicator-width));
    position: absolute;
    top: 40%;
    width: var(--indicator-width);

    & circle {
      animation: modal-dash 2500ms ease-in-out infinite;
      stroke: var(--color-label);
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0;
      stroke-linecap: round;
    }
  }
}

.in .modal-body .is-loading .form-group,
.modal-body .is-loading .form-group {
  opacity: .333;
}

@keyframes modal-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}
@keyframes modal-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

/**
 * Modal redirect button wrapper.
 *
 * @todo Refactor into spacing/padding helper classes.
 */
.modal-redirect-wrapper {
  margin-top: 2em;
  margin-bottom: 1em;
}