/*
 * Copyright (C) 2017-2019 Dremio Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:global {
  // DX-11429 TODO reafactor component to use css modules instead fo global classes

  .ReactModalPortal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    /*
    This element is always present even when modals are not open.
    Before this element had no size, then the contained overlay was position: fixed to fill the screen. But now we need this element to also be 100%/100% to give the size to its child.
    So need pointer-events: none to not block the screen.
    However, it's child still needs to be clickable, so put it back with pointer-events: all in modal.js
    */
    pointer-events: none;
  }

  body.body-modal-open #root {
    overflow: hidden;
  }

  .modal-form-wrapper {
    margin: 0 auto;
  }

  .small-modal .modal-form-wrapper {
    width: 670px;
    overflow-y: auto;
  }

  .ReactModal__Overlay {
    backdrop-filter: blur(2px);
    opacity: 0;
  }

  .ReactModal__Overlay--after-open {
    opacity: 1;
    transition: all 150ms ease-out;
  }

  .ReactModal__Overlay--before-close {
    opacity: 0;
    transition: all 150ms ease-in;
  }

  /** small-modal */

  .ReactModal__Overlay.small-modal {
    margin-top: -80px;
  }

  .ReactModal__Overlay--after-open.small-modal {
    margin: 0;
    transition: all 150ms ease-out;
  }

  .ReactModal__Overlay--before-close.small-modal {
    margin-top: -80px;
  }

  /** medium-modal */

  .medium-modal .ReactModal__Content {
    top: 0;
    bottom: 80px;
  }

  .medium-modal .ReactModal__Content--after-open {
    top: 40px;
    bottom: 40px;
    transition: all 150ms ease-in;
  }

  .medium-modal .ReactModal__Content--before-close {
    top: 0;
    bottom: 80px;
    transition: all 150ms ease-in;
  }

  .medium-modal .modal-form-wrapper {
    overflow-y: auto;
  }

  /** large-modal */

  .large-modal .ReactModal__Content {
    top: 0;
    bottom: 80px;
  }

  .large-modal .ReactModal__Content--after-open {
    top: 40px;
    bottom: 40px;
    transition: all 150ms ease-in;
  }

  .large-modal .ReactModal__Content--before-close {
    top: 0;
    bottom: 80px;
    transition: all 150ms ease-in;
  }

  .large-modal .modal-form-wrapper {
    overflow-y: auto;
  }

  /** tall-modal */

  .tall-modal .ReactModal__Content {
    top: 0;
    bottom: 80px;
  }

  .tall-modal .ReactModal__Content--after-open {
    top: 40px;
    bottom: 40px;
    transition: all 150ms ease-in;
  }

  .tall-modal .ReactModal__Content--before-close {
    top: 0;
    bottom: 80px;
    transition: all 150ms ease-in;
  }

  .tall-modal .modal-form-wrapper {
    overflow-y: auto;
  }

  .modal-header {
    border-bottom: 1px solid var(--border--neutral);
    border-radius: 4px 4px 0 0;
  }

  .add-shadow {
    z-index: 2;
    box-shadow: var(--dremio--shadow--layer-1);
  }

  .confirm-cancel-footer {
    padding: 8px;
    &--leftAlign {
      justify-content: flex-start !important;
    }
  }

  .--newModalStyles {
    background: var(--fill--primary);
    inset: 10% 40px;
    position: absolute;
    max-width: 600px;

    .modal-header {
      background: var(--fill--primary);
      border-bottom: 1px solid var(--border--neutral);
      height: 56px !important;

      .EllipsedText {
        color: var(--text--primary) !important;
        font-size: 16px !important;
        line-height: 24px;
        font-weight: 600 !important;
      }
    }

    .modal-form-wrapper {
      max-width: 600px;
    }

    .field {
      width: 100%;
    }

    .confirm-cancel-footer {
      height: 56px !important;
      padding: 12px 16px !important;

      [data-qa="cancel"] {
        margin-right: 8px !important;
      }
      [data-qa="confirm"] {
        margin-right: 0 !important;
      }
    }

    .warning-icon {
      height: 24px;
      width: 24px;
      margin-right: 8px;
      color: var(--icon--primary);
    }
  }
}
