/*
 * 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/variables.less";
@import "~#oss/uiTheme/less/commonModifiers.less";

:global {
  .--bgColor {
    &-header {
      background-color: var(--fill--secondary);
    }

    &-highlight {
      background-color: var(--fill--warning);
    }

    &-white {
      background-color: var(--fill--primary);
    }

    &-transparent {
      background-color: transparent !important;
    }

    // advanced enabled light row
    &-advEnLight {
      background-color: var(--fill--brand);
    }

    // advanced enabled dark row
    &-advEnDark {
      background-color: var(--fill--primary--selected);
    }

    // advanced disabled light row
    &-advDisLight {
      background-color: var(--fill--primary);
    }

    // advanced disabled dark row
    &-advDisDark {
      background-color: var(--fill--secondary);
    }

    &-advEnDrag {
      background-color: var(--fill--brand);
    }

    &-advDisDrag {
      background-color: var(--fill--primary);
    }
  }

  // border color and width
  .--bColor {
    // set border color for every side: b-col-full
    &-full {
      border: 1px solid var(--border--neutral);
    }

    each(@directions, .(@direction-val) {
      // set border color for specific side: b-col-@{direction-key}
      &-@{direction-val} {
        border-@{direction-val}: 1px solid var(--border--neutral);
      }
    });
  }

  .AccelerationAdvanced {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &__tabs {
      display: flex;
      align-items: center;
      height: @row-height;
      width: 100%;
      margin-bottom: 5px;
    }

    &__tab {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: var(--text--faded);
      display: flex;
      align-content: center;
      padding: 5px;
      margin-right: 10px;

      &:hover {
        background-color: var(--fill--primary--hover--alt) !important;
        cursor: pointer;
      }
    }
  }

  .AccelerationAggregate {
    display: flex;
    position: relative;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;

    &__AggregateForm {
      flex-flow: column nowrap !important;
      flex-grow: 1;
      padding: 10px 10px 0;

      &__loading {
        opacity: 0.5;
      }
    }

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: @row-min-height;
      background-color: var(--fill--secondary);
      padding: 3px;
    }

    &__toggle {
      width: auto;
      padding-left: 10px;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
      margin-left: -10px;
    }

    &__layout {
      float: right;
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: rgb(153, 153, 153);
      padding: 0 5px;
      display: flex;
      align-items: center;
    }
  }

  .AccelerationAggregation {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 40px;
      background-color: var(--fill--secondary);
      border-top: 1px solid var(--border--neutral);
      border-left: 1px solid var(--border--neutral);
      border-right: 1px solid var(--border--neutral);
      padding: 3px;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
    }
  }

  .AccelerationGridController {
    display: flex;
    flex-grow: 1;

    &__cell {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: var(--text--faded);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30px;
      margin-left: 10px;
      border-right: 1px solid var(--border--neutral);
      border-left: 1px solid var(--border--neutral);
    }
  }

  .AccelerationGridSubCell {
    &__subCell {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-right: 1px solid var(--border--neutral);
    }

    &__lastSubCell {
      // &:extend(.AccelerationGridSubCell__subCell); DX-34369: why isn't extend working?
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      border-right: 1px solid var(--border--neutral);
      border-right: 0;
    }

    &__subVal {
      display: flex;
      flex-grow: 1;
      justify-content: center;
    }

    &__subValClickable {
      // &:extend(.AccelerationGridSubCell_subVal); DX-34369: why isn't extend working?
      display: flex;
      flex-grow: 1;
      justify-content: center;
      border-left: 1px solid var(--border--neutral);

      &--icon {
        cursor: pointer;
      }
    }
  }

  .AccelerationRaw {
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    &__header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: @row-min-height;
      background-color: var(--fill--secondary);
      border-top: 1px solid var(--border--neutral);
      border-left: 1px solid var(--border--neutral);
      border-right: 1px solid var(--border--neutral);
      padding: 3px;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
    }
  }

  .AccelerationBasic {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    &__AccelerationAggregate {
      background-color: var(--fill--secondary);
      border: 1px solid var(--border--neutral);
    }

    &__header {
      background-color: var(--fill--secondary);
      border: 1px solid var(--border--neutral);
      margin-bottom: 15px;
    }

    &__message {
      z-index: 1000;
    }

    &__toggle {
      width: auto;
      padding-left: 10px;
    }

    &__toggleLayout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: @row-min-height;
      background-color: var(--fill--secondary);
      padding: 3px;
      position: relative;
    }

    &__toggleLabel {
      display: flex;
      align-items: center;
      margin-left: -10px;
    }
  }

  .CellPopover {
    &__columnWrap {
      margin-top: 10px;
    }

    &__column {
      display: flex;
      height: 20px;
      align-items: center;
      border: 1px solid var(--color--mint--300);
      background-color: var(--fill--brand);
    }

    &__disabledColumn {
      // &:extend(CellPopover__column)
      display: flex;
      height: 20px;
      align-items: center;
      border: 1px solid var(--border--neutral);
      background-color: var(--fill--primary);
    }

    &__columnIndex {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: var(--text--faded);
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #96e3d1;
      height: 100%;
    }

    &__disabledColumnIndex {
      // &:extend(.CellPopover__columnIndex)
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--fill--disabled);
      height: 100%;
      color: var(--text--disabled);
    }

    &__menuHeader {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13px;
      color: var(--text--faded);
      display: flex;
      align-items: center;
      height: 32px;
    }

    &__measureMenuItem {
      margin-top: 5px;
    }
  }

  .AccelerationForm {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 540px;
    max-height: calc(100vh - 120px);
    overflow: hidden;

    &__formBody {
      height: 100%;
      display: flex;
      flex-direction: column;

      &__loading {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        dremio-icon {
          width: 32px;
          height: 32px;
        }
      }
    }

    &__extraError {
      margin-bottom: -16px !important; //overridding global modifier
    }
  }

  .LayoutInfo {
    &__main {
      font-family: @acceleration_font;
      font-weight: 400;
      font-size: 13;
      color: var(--text--faded);
      padding: 0 5px;
      display: flex;
      align-items: center;
    }

    &__message {
      text-align: center;
      flex: 1;
      padding: 0 5px;
    }

    &__status {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }
  }

  .ValidityIndicator {
    height: 20px;
    flex: 0 0 24px;
    text-align: center;
  }
}
