// Global CSS
@import "./color";
@import "./mixins";
@import "./dimension";

html {
  font-size: 62.5%; // 10px = 1rem, 12px=1.2rem, 14px=1.4rem, 16px=1.6rem
}

input {
  border: 0.1rem solid $aeap-border;
  height: $input-value-height;
  &:focus {
    border: 0.1rem solid $aeap-color-primary;
    outline: none;
  }

  &.error {
    border: 0.1rem solid $aeap-color-danger;
  }

  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }
}

textarea {
  &:invalid {
    box-shadow: none;
  }
}

.root {
  background: $aeap-bg;
  color: $aeap-color-navy;
  font-family: NotosansFont;
  font-size: 1.6rem;
  overflow-y: auto;
  fa-icon {
    font-size: 1.8rem;
  }
}

.divider {
  border-left: 0.1rem solid $aeap-color-light-grey;
  height: 3.2rem;
}

.desktop-toggle {
  @include screen-tablet {
    display: none;
  }
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tablet-toggle {
  @include screen-tablet-above {
    display: none;
  }
}

.mobile-toggle {
  @include screen-mobile {
    display: none;
  }
}

.shadow {
  box-shadow: 0 0.4rem 0.4rem $aeap-shadow;
}

.side-filter-panel {
  .nav.nav-tabs {
    font-family: "NunitoFont", Fallback, sans-serif;
    padding: 0 2.4rem;
  }

  .secondary-filters {
    .nav-link {
      &.active {
        background-color: $aeap-color-lighter-grey;
      }
    }
  }

  & ::-webkit-scrollbar {
    height: 1rem;
    width: 1rem;
  }

  & ::-webkit-scrollbar-thumb {
    background: $aeap-scroll-bar;
    border-radius: 1rem;
  }
}

.nav.nav-tabs {
  border: 0;
  font-family: "NunitoFont", Fallback, sans-serif;

  .nav-item.tab-class {
    border: 0;
    border-right: thin solid $aeap-border-divider;
    left: -0.8rem;
    position: relative;

    .nav-link {
      border: 0;
      border-bottom: 0.4rem solid transparent;
      color: $aeap-title-primary;
      font-family: "NunitoFont", Fallback, sans-serif;
      margin: 0 1.2rem;
      padding: 0.5rem 0;

      &.active {
        background: $aeap-transparent;
        border: 0;
        border-bottom: 0.4rem solid $aeap-color-blue;
        color: $aeap-title-primary;
        font-weight: bold;
      }

      &:hover {
        border: 0;
        border-bottom: 0.4rem solid $aeap-color-blue;
        color: $aeap-title-primary;
      }
    }

    &:last-child {
      border-right: 0;
    }
  }

  .nav-item.tab-class-menu {
    border: 0;
    border-right: 0;
    left: -0.8rem;
    position: relative;

    .nav-link {
      border: 0;
      border-bottom: 0.4rem solid transparent;
      color: $aeap-title-primary;
      font-family: "NunitoFont", Fallback, sans-serif;
      margin: 0 1.2rem;
      padding: 0.5rem 0;

      &.active {
        border: 0;
        border-bottom: 0.4rem solid $aeap-color-primary;
        color: $aeap-title-primary;
        font-weight: bold;
      }

      &:hover {
        border: 0;
        border-bottom: 0.4rem solid $aeap-color-primary;
        color: $aeap-title-primary;
      }
    }

    &:last-child {
      border-right: 0;
    }
  }
}

.tabset {
  .nav.nav-tabs {
    flex-wrap: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    .nav-item.tab-class {
      margin-bottom: 0.8rem;
      white-space: nowrap;
      .nav-link {
        &:focus {
          outline: none;
        }
      }
    }

    .nav-item.tab-class-menu {
      margin-bottom: 0.2rem;
      white-space: nowrap;
      .nav-link {
        &:focus {
          outline: none;
        }
      }
    }
  }
}

.tabset ::-webkit-scrollbar {
  height: 1rem;
  width: 1rem;
}

.tabset ::-webkit-scrollbar-thumb {
  background: $aeap-scroll-bar;
  border-radius: 1rem;
}

.multi-button-toast-container {
  &.details,
  &.compare-class-tertiary {
    background: $aeap-color-lemongreen;
  }

  &.compare-class-primary {
    background: $aeap-color-blue-dark;
  }

  &.compare-class-secondary {
    background: $aeap-color-orange1;
  }
}

.center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.link-color {
  color: $aeap-color-primary;
}

.link {
  text-decoration: underline;
}

.btn-lg {
  font-size: 1.6rem;
  font-weight: 600;
  padding: 1.2rem 3.2rem;
}

.icon-wrap {
  height: $icon-wrap-height;
  width: $icon-wrap-width;
}

.icon-wrap-for-circular-background {
  height: $icon-wrap-circular-background-height;
  width: $icon-wrap-circular-background-width;
}

.icon-color-toolbar-active {
  color: $aeap-toolbar-icon-active-color;
  transition: color 0.5s ease-in-out;
}

.icon-color-toolbar-inactive {
  color: $aeap-toolbar-icon-inactive-color;
  transition: color 0.5s ease-in-out;
}

.icon-color-success {
  color: $aeap-color-success;
}

.icon-color-danger {
  color: $aeap-color-danger-icon;
}

.icon-color-toolbar-blue {
  color: $aeap-color-blue;
  transition: color 0.5s ease-in-out;
}

.icon-color-toolbar-on-off {
  background: $aeap-color-light-blue;
  color: $aeap-color-white;
  transition: background-color 0.5s ease-in-out;
}

button {
  &.fake-btn {
    &.icon-color-toolbar-notification {
      background: $aeap-color-blue;
      border-radius: 9.9rem;
      color: $aeap-color-white;
      height: 2.8rem;
      transition: background-color 0.5s ease-in-out;

      &::before {
        position: relative;
        top: 0.1rem;
      }
    }
  }
}

.seperator {
  border-left: 0.1rem solid $aeap-border-divider;
}

.active-color {
  color: $aeap-title-primary;
}

.edited-allocation {
  background: $aeap-cp-editable;
}

.white-color {
  color: $aeap-color-white;
}

.light-grey-color {
  color: $aeap-color-storm-grey;
}

.passive-color {
  color: $aeap-title-secondary;
}

.background-primary-active {
  background-color: $aeap-color-m-light-blue;
}

.background-light-blue {
  background-color: $aeap-lighter-blue;
}

.scrollbar {
  &::-webkit-scrollbar {
    width: 1rem;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0.1rem $aeap-scrollbar-box-shadow;
    box-shadow: inset 0 0 0.1rem $aeap-scrollbar-box-shadow;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $aeap-scroll-bar;
    border-radius: 1rem;
    outline: 0.1rem solid $aeap-border-divider;
  }
}

​ .disable-layout {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.success {
  color: $aeap-color-success;
}

.warning {
  color: $aeap-color-warning;
}

.amber {
  color: $aeap-color-amber;
}

.danger {
  color: $aeap-color-danger;
}

.scenario-table-title {
  color: $aeap-title-primary;
}

.blue-clock {
  color: $aeap-color-blue;
}

.title-color {
  color: $aeap-color-navy;
}

.sub-title-color-dark-grey {
  color: $aeap-color-dark-grey;
}

.title-color-black {
  color: $aeap-color-black;
}

.load-scenario-table-title {
  color: $aeap-title-primary;
}

// ToolBar Stylying since it would be common across toolbars

.toolbar-component {
  background: $aeap-color-white;
  border-top: 0.1rem solid $aeap-border-divider;
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;

  &.filter-toolbar {
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
  }

  &.predictive-ordering {
    .left-side {
      .icon-panel {
        .product-count {
          display: flex;
        }
      }

      .title-panel {
        .main-title-panel {
          .reviewed {
            color: $aeap-color-pink;
          }
        }
      }

      .main-sub-title-panel {
        position: relative;
        top: 0.5rem;
        ul {
          &.main-sub-title {
            li {
              font-style: italic;
              padding-right: 2.5rem;
              &:first-child {
                list-style-type: none;
              }
            }
          }
        }
      }
    }
  }

  .error-msg {
    color: $aeap-color-danger;
    font-weight: 600;
  }

  .icon-group-divider {
    border-left: 0.1rem solid $aeap-color-white-light;
    height: 4.8rem;
  }

  .left-side {
    .title-panel {
      .main-title-panel {
        list-style-type: none;
        .main-title li {
          color: $aeap-color-navy;
          &:not(.sub-title-color-dark-grey) {
            align-self: center;
            font-style: normal;
            font-weight: normal;
            list-style-type: none;

            &:first-child {
              align-self: center;
              font-size: 2.4rem;
              font-style: normal;
              font-weight: 600;
              line-height: 2.4rem;
            }

            &:nth-child(2) {
              padding-left: 1.6rem;
              padding-right: 1.2rem;
            }

            &:not(:first-child) {
              &:not(:nth-child(2)) {
                padding-left: 1.2rem;
                padding-right: 1.2rem;
              }
            }

            &:last-child {
              border-right: 0;
            }
          }
        }

        .main-title-no-compare {
          .main-sub-title-panel {
            .main-sub-title {
              font-style: italic;
              font-weight: normal;
              list-style-type: circle;
            }

            .main-sub-title li {
              margin-right: 2.4rem;

              &:first-child {
                list-style-type: none;
              }
            }
          }
        }
      }

      .main-title {
        .compare-tabs {
          cursor: pointer;
          margin-right: $input-value-height;
          position: relative;
          width: auto;
          .fas.fa-times {
            color: $aeap-color-light-grey;
          }

          .fas.fa-pointer {
            color: $aeap-color-light-grey;
          }

          &.selected {
            .compare-tabs-title {
              &::after {
                border-bottom: 0.4rem solid $aeap-color-blue;
                bottom: -1rem;
                content: "";
                position: absolute;
                width: 70%;
              }
            }
          }

          &.details,
          &.compare-class-tertiary {
            &::before {
              background: $aeap-color-lemongreen;
            }
          }

          &.compare-class-primary {
            &::before {
              background: $aeap-color-blue-dark;
            }
          }

          &.compare-class-secondary {
            &::before {
              background: $aeap-color-orange1;
            }
          }

          &::before {
            border-radius: 50%;
            content: "";
            height: 1rem;
            margin-right: 1.2rem;
            width: 1rem;
          }

          .compare-tabs-title {
            font-weight: bold;
            line-height: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .compare-tabs-subtitle {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            li {
              display: inline;
              &:first-child {
                font-size: 1.2rem;
                font-weight: normal;
              }
            }
          }
        }

        .multi-select-dropdown-container {
          margin-left: 0.6rem;
          margin-right: 1.4rem;
        }
      }
    }
  }

  .right-side {
    padding-left: 1.5rem;
    .icon-group {
      border-right: 0.1rem solid $aeap-color-white-light;

      .icon-group-title {
        padding-bottom: 0.5rem;

        .section-title {
          color: $aeap-color-very-dark-grey;
          font-style: normal;
          font-weight: normal;
        }

        &.no-padding {
          padding: 0;
        }
      }

      .loop {
        margin-right: 0.5rem;

        &:last-child {
          margin-right: 0;
        }
      }

      &:last-child {
        border: 0;
        margin-right: 0;
        padding-right: 0;
      }
    }
  }

  .icon-actions {
    height: 3rem;
    width: 3rem;

    &:last-child {
      margin-right: 0;
    }

    .icon-color-toolbar-inactive {
      cursor: default;
    }

    .icon-wrap {
      width: 3rem;
    }
  }

  .icon-panel {
    a {
      color: $aeap-color-primary;
      cursor: pointer;
      font-weight: 600;
      outline: none;
      width: 10rem;
    }
  }

  &.sense-check-detail {
    padding-bottom: 0.8rem;
    padding-top: 0.8rem;
    .icon-group-divider {
      height: 3rem;
    }

    .return-link {
      font-size: 1.2rem;
      width: 8rem;
    }
  }
}

// form elements

label,
.label {
  line-height: 1;
  text-transform: capitalize;
}

.multiselect-dropdown {
  cursor: pointer;

  &:disabled {
    opacity: 0.3;
    pointer-events: none;
  }
}

.dropdown-option {
  &:hover {
    background: $aeap-checkbox;
  }
}

.dropdown-label {
  border: 0.1rem solid $aeap-border;
  height: $input-value-height;
  line-height: $input-value-height;
  &.error {
    border: 0.1rem solid $aeap-color-danger-icon;
  }
}

.comment-text {
  border: 0.1rem solid $aeap-color-silver;
  font-size: 1.6rem;
  padding: 0.7rem 1.6rem;
  width: 100%;
}

.main-title-item {
  font-weight: 300;
  position: relative;
  &::before {
    background-color: $aeap-color-grey;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 1rem;
    left: -0.8rem;
    position: absolute;
    top: 38%;
    width: 1rem;
  }
}

.div-percent-bar {
  background-color: $aeap-percent-bar-bg-color;
  display: inline-block;
  height: 1rem;
  left: 14.625rem;
  top: 4.25rem;
  width: 3.5rem;
}

.YOY-values {
  padding-left: 0.313rem;
  padding-top: 0.094rem;
  position: relative;
  text-align: center;
  z-index: 0;
}

.div-outer-div {
  display: inline-block;
  height: 100%;
  width: 50%;
}

.promotion-bar {
  background-color: $aeap-percent-bar-bg-color;
  display: inline-block;
  height: 2.5rem;
}

.promotion-bar-wrapper {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.cp-tab-custom-css {
  align-items: center;
  color: $aeap-color-navy;
  display: flex;
  font-family: Nunito;
  font-style: normal;
  font-weight: 300;
  line-height: 1.6rem;
  padding-bottom: 1.5rem;
  padding-left: 2.3125rem;
  padding-top: 1rem;
}

.cp-dashboard {
  // % bar
  .left-percent-bar {
    height: 4.5rem;
    width: 8.8rem;
  }

  .right-percent-bar {
    float: right;
    height: 4.5rem;
    position: relative;
    width: 8.8rem;
  }

  .red-color {
    background-color: $aeap-cp-danger;
    border-right: 0.3rem solid $aeap-color-red;
    height: 100%;
    max-width: 8.8rem;
    position: relative;
  }

  .green-color {
    background-color: $aeap-cp-success;
    border-left: 0.3rem solid $aeap-color-green;
    height: 100%;
    max-width: 8.8rem;
    position: relative;
  }

  .left-percent-bar span,
  .right-percent-bar span {
    color: $aeap-color-black;
    font-family: "NotoSansFont";
    font-size: 1.6rem;
    font-style: normal;
    font-weight: normal;
    line-height: 4.5rem;
    position: relative;
    text-align: right;
    top: -5rem;
    width: 4rem;
  }

  .left-percent-bar span {
    left: 100%;
  }
}

// need these styles for cp overlapping in ag-grid.scss
// .driver-analysis,
// .collaborative-planning,
// .cp-dashboard,
// .planning-workbook .ag-theme-alpine .ag-cell.ag-cell-last-left-pinned {
// 	&:not(.ag-cell-range-right) {
// 		&:not(.ag-cell-range-single-cell) {
// 		 border-right: 0.1rem solid $aeap-color-mostly-black;
// 		}
// 	}
// }

.legend-locked {
  background: $aeap-color-light-greyish-blue;
}

.autoHeight {
  height: calc(100% - 1.6rem);
}

.autoHeightVh {
  height: calc(100vh - 1.6rem);
}

.btn-toggle {
  border-radius: 0.8rem;
  height: 1.602rem;
  position: relative;
  width: 3.235rem;

  &.border-before {
    background: $aeap-grid-checked;
    border: 0;
  }

  &.border-after {
    background: $aeap-color-white;
    border: 0.1rem solid $aeap-color-light-bluish-grey;
    box-sizing: border-box;
  }

  &:focus {
    outline: 0;
  }
}

.btn-lrg {
  &:focus,
  &.focus {
    &,
    &.active {
      outline: none;
    }
  }

  &::after {
    opacity: 0.5;
  }

  > .handle {
    background: $aeap-grid-checked;
    border-radius: 1.875rem;
    bottom: 10.5%;
    height: 1.002rem;
    left: 9.38%;
    position: absolute;
    right: 53.12%;
    top: 10.5%;
    transition: left 0.25s;
    width: 1.013rem;
  }

  > .activated {
    background: $aeap-color-white;
    border-radius: 1.875rem;
    bottom: 10.5%;
    height: 1.102rem;
    left: 56.25%;
    position: absolute;
    right: 6.25%;
    top: 10.5%;
    transition: left 0.25s;
    width: 1.113rem;

    &::before {
      opacity: 0.5;
    }

    &::after {
      opacity: 1;
    }
  }
}