/*
 * 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.
 */

@import "~#oss/uiTheme/less/mixins.less";
@import "~#oss/uiTheme/less/reset.less";
@import "~#oss/uiTheme/less/fields.less";

@body-bg: var(--fill--primary);
@font-size-base: 14px;
@line-height-base: 1.428571429;
@line-height-computed: floor((@font-size-base * @line-height-base));
@table-cell-padding: 8px;
@table-condensed-cell-padding: 5px;

:global {
  #root {
    isolation: isolate;
  }

  //Mantine overrides
  .mantine-Select-dropdown {
    margin-top: -8px;
  }

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

  .ReactModal__Content {
    outline: none;
    background: var(--fill--primary) !important;
    color: var(--text--primary) !important;
  }

  .VirtualScroll {
    outline: none;
  }

  .ReactVirtualized__Grid {
    outline: none;
  }

  .noneDisplay {
    display: none;
  }

  .ReactModal__Overlay {
    z-index: 31000;
  }

  // http://stackoverflow.com/questions/12046315/prevent-overscrolling-of-web-page
  html {
    // .font-basic();
    height: 100%;

    // DX-24382. Apply this class to disable accidentally browser back button trigger on scroll
    &.disable-back-on-scroll {
      overscroll-behavior-x: none;
    }
  }
  body {
    // .font-basic();
    height: 100%;
    overflow: auto;
    margin: 0;
    position: relative; /* so modal portal can be position: absolute relative to body */

    * {
      box-sizing: border-box;
    }
  }

  #root {
    height: 100vh;
    box-sizing: border-box;

    .item-block {
      [type="checkbox"]:not(:checked),
      [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
      }

      [type="checkbox"] + label {
        position: relative;
        padding-left: 25px;
        cursor: pointer;
      }

      /* checkbox aspect */
      [type="checkbox"] + label::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 17px;
        height: 17px;
        border: 1px solid #aaa;
        background: #f8f8f8;
        border-radius: 3px;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
      }

      /* checked mark aspect */
      [type="checkbox"] + label::after {
        content: "✔";
        position: absolute;
        top: 5px;
        left: 2px;
        font-size: 16px;
        line-height: 0.8;
        color: #000;
        transition: all 0.2s;
        opacity: 0;
        transform: scale(0);
      }

      [type="checkbox"]:checked + label::after {
        opacity: 1;
        transform: scale(1);
      }

      /* disabled checkbox */
      [type="checkbox"]:disabled + label::before {
        box-shadow: none;
        border-color: #bbb;
        background-color: #ddd;
      }

      [type="checkbox"]:disabled:checked + label::after {
        color: #999;
      }

      [type="checkbox"]:disabled + label {
        color: #aaa;
      }

      /* accessibility */
      [type="checkbox"]:focus + label::before {
        border: 1px dotted blue;
      }

      /* hover style just for information */
      label:hover::before {
        border: 1px solid #4778d9 !important;
      }

      .item-label {
        display: inline-block;
        cursor: pointer;
        position: relative;
        padding-left: 25px;
        margin-right: 15px;
        font-size: 13px;
        font-weight: 500;

        &::before {
          content: "";
          display: inline-block;
          width: 17px;
          height: 17px;
          margin-right: 10px;
          position: absolute;
          left: 0;
          bottom: 1px;
          background-color: #e1e1e1;
          box-shadow:
            inset 0 2px 3px 0 rgba(0, 0, 0, 0.1),
            0 1px 0 0 rgba(255, 255, 255, 0.7);
          border-radius: 8px;
        }
      }

      .item-input[type="radio"]:checked + label::before {
        content: "\2022";
        color: #000;
        font-size: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .item-input[type="radio"] {
        display: none;
      }
    }
  }

  /* styles for tables */
  table {
    background-color: transparent;
    border-collapse: collapse;
  }
  caption {
    padding-top: @table-cell-padding;
    padding-bottom: @table-cell-padding;
    text-align: left;
  }
  th {
    text-align: left;
  }

  .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: @line-height-computed;
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          padding: @table-cell-padding;
          vertical-align: middle;
        }
      }
    }
    > thead > tr > th {
      vertical-align: bottom;
      border-bottom: 1px solid var(--border--neutral);
    }
    > caption + thead,
    > colgroup + thead,
    > thead:first-child {
      > tr:first-child {
        > th,
        > td {
          border-top: 0;
        }
      }
    }

    > tbody + tbody {
      border-top: 1px solid var(--border--neutral);
    }

    .table {
      background-color: var(--fill--primary);
    }
  }

  .table-acceleration {
    > thead,
    > tbody {
      > tr {
        > th,
        > td {
          font-size: 12px;
        }
      }
    }
  }

  .table-condensed {
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          padding: @table-condensed-cell-padding;
        }
      }
    }
  }

  .table-striped {
    > tbody > tr:nth-of-type(odd) {
      background-color: var(--fill--secondary);
    }
  }

  .table-hover {
    > tbody > tr:hover {
      background-color: var(--border--neutral);
    }
  }

  .table-responsive {
    overflow-x: auto;
    min-height: 0.01%;
  }

  table col[class*="col-"] {
    position: static;
    float: none;
    display: table-column;
  }
  table {
    td,
    th {
      &[class*="col-"] {
        position: static;
        float: none;
        display: table-cell;
      }
    }
  }

  input[type="radio"],
  input[type="checkbox"]:not(.MuiSwitch-input) {
    margin: 4px 0 0;
    line-height: normal;
  }
  input[type="file"] {
    display: block;
  }
  input[type="range"] {
    display: block;
    width: 100%;
  }
  select[multiple],
  select[size] {
    height: auto;
  }

  a,
  .link {
    color: var(--text--link);
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    &:hover,
    &:focus {
      color: var(--text--link);
      text-decoration: underline;
    }
  }
  .link--disabled {
    color: var(--text--disabled) !important;
    opacity: 0.7;
    cursor: not-allowed;
    dremio-icon {
      color: var(--icon--disabled) !important;
    }
  }
  .no--pointer--events {
    pointer-events: none;
  }
  .message-content a {
    color: var(--text--primary);
    text-decoration: underline;
  }
  button:not([disabled]) {
    cursor: pointer;
  }
  input,
  textarea,
  keygen,
  select,
  button {
    font-family: var(--dremio--font-family);
    box-sizing: border-box;
  }
  button {
    font-size: 1rem;
  }

  .rdr-Days {
    max-height: 126px;
    min-height: 126px;
  }

  .rdr-Day {
    height: 21px !important;
  }

  .today {
    background: transparent !important;
  }

  .rdr-Day.is-selected:not(.is-passive),
  .rdr-Day.is-inRange:not(.is-passive) {
    position: relative;
    border-bottom: 2px solid #fff !important;

    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      width: 21px;
      height: 20px;
      left: -1px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.0980392);
    }
  }
  /* tricks end */

  .container-striped {
    > :nth-of-type(odd) {
      background-color: var(--fill--secondary);
    }
  }

  .spinner {
    :local {
      // IMPORTANT!!! do not use shorthand property 'animation'. Css modules does not work with it corretly (see https://github.com/css-modules/css-modules/issues/141#issuecomment-379242211)
      animation-name: spin;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      //animation: spin 2s infinite linear;
    }
  }

  /* generic style for data tables */
  .data-table {
    .ReactVirtualized__Table__row:nth-child(even) {
      background-color: var(--fill--secondary);
    }
  }

  // Hyperlink in popup menu should not have underline on hover (DX-24661)
  .dremio-popover a:hover {
    text-decoration: none;
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
