@import "fonts";
@import "animations";
@import "base/reset";
@import "base/forms";
// @import "../icons/style";
// @import "../assets/icons/ag-grid.css";
@import "./helpers";
@import "./utils";
@import "./utils_mixin";
@import "components/text-input";
@import "components/image";
@import "components/chip";
@import "components/surface";
@import "components/loader";
@import "components/dropdown";
@import "components/media";
@import "components/icon";
@import "components/markdown";
@import "components/tab";
@import "components/table";
@import "components/button-text";
@import 'components/rb-table';
@import 'components/el-tooltip';
@import 'components/filter';

.no-padding {
  padding: 0 !important;
}

// Padding helpers
// Multiples of 5, max:100
@for $i from 0 through 20 {

.padding-#{$i * 5},
.p-#{$i * 5} {
    padding: #{($i * 5) + 'px'};
}

.padding-top-#{$i * 5},
.pt-#{$i * 5} {
    padding-top: #{($i * 5) + 'px'};
}

.padding-right-#{$i * 5},
.pr-#{$i * 5} {
    padding-right: #{($i * 5) + 'px'};
}

.padding-bottom-#{$i * 5},
.pb-#{$i * 5} {
    padding-bottom: #{($i * 5) + 'px'};
}

.padding-left-#{$i * 5},
.pl-#{$i * 5} {
    padding-left: #{($i * 5) + 'px'};
}

.padding-horizontal-#{$i * 5},
.ph-#{$i * 5} {
    padding-left: #{($i * 5) + 'px'};
    padding-right: #{($i * 5) + 'px'};
}

.padding-vertical-#{$i * 5},
.pv-#{$i * 5} {
    padding-top: #{($i * 5) + 'px'};
    padding-bottom: #{($i * 5) + 'px'};
}
}

#app {
  background: #f5f7fa;
}

.page {
  // max-width: 1920px;
  position: relative;
  box-shadow: 0px 0px 6px silver;
  background: #f5f7fa;
  // margin: auto;
}

[draggable="true"] {
  cursor: grab;
}

a {
  text-decoration: none;

  @extend .u-color-grey-dark;
}

a:hover {
  cursor: pointer;
  text-decoration: none;
}

.list {
  li {
    @extend .u-font-size-4;
    @include get-spacing(p,m);
  }
}

.list--hover {
   li {
    list-style-type: none;
    @extend .u-cursor-pointer;
    @extend .u-font-weight-normal;
  }

  li:hover {
    @extend .u-bg-color-grey-x-light;

    .list__action {
      opacity: 1;
    }
  }

  .list__action {
    opacity: 0;
  }
}

.list--blue-hover.list--hover {
  li:hover {
    @extend .u-bg-color-blue-base;
    @extend .u-color-grey-white;
  }
}

.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.card {
  @extend .surface;
  @extend .surface--rounded;
  @extend .u-position-relative;
  @extend .u-color-grey-dark;
}

.card__header {
  @include get-spacing(pt,m);
  @include get-spacing(pb,m);
  @include get-spacing(ph,m);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__title {
  @extend .u-font-size-3;

  display: inline-flex;
  align-items: center;
}

.card__value {
  font-size: map-get($u-font-size, 4);
}

a.dropdown-item {
  @extend .u-font-size-4;
}

a.dropdown-item {
  font-size: 1.4rem;
  text-transform: initial;
}

.modal-card__lg {
  width: 960px;
}

.dashboard__section-header {
  @extend .u-font-size-2;
  @extend .u-font-weight-600;
  @include get-spacing(pv,l);
}

.flex-row {
  @include get-spacing(mb,m);

  display: flex;

  > div {
    @include get-spacing(mr,m);
  }

  > div:last-child {
    margin-right: 0;
  }
}

.tick,
.label {
  fill: #999;
}

.c3 path.domain,
.c3 line {
  stroke: #aaa;
}

.card__subtitle {
  @extend .u-font-size-6;
}

.link {
  @extend .u-font-weight-600;
  @extend .u-color-blue-base;

  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.page-body {
  background: $pageBackground;
  overflow: auto;
  flex: 1;
}

.login-long-message {
  max-width: 500px;
  line-height: 1.31;
}

.login-logo-svg {
  right: 40px;
  top: 40px;
}

.bg-blue-base-gradient {
  background: linear-gradient(to bottom, rgba(0, 124, 246, 0.75), rgba(0, 124, 246, 0.85) 12%, rgba(0, 124, 246, 0.95) 73%, rgba(0, 124, 246, 1));
}

.icon-frame {
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.icon-frame_left {
  .rb-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0 !important;
  }
}

.icon-frame_right {
  .rb-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 0 !important;
  }
}

.u-margin-auto {
  margin: auto;
}

.rb-tab.rb-tab--basic .rb-tab__item.active {
  @extend .u-bg-color-blue-base;
}

.fill--parent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  background: rgba(255, 255, 255, 0.95);
  z-index: 10;
}

/* pagination component has negative margin, to overcome that im[portant is used */
.pagination {
  // margin: 0 !important;
  // margin-bottom: 1.6rem !important;
}

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis {
  font-size: 1.8rem !important;
  min-width: auto !important;
  border: 0 solid transparent !important;
}

.pagination-link,
.pagination-ellipsis {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  height: auto !important;
}

.pagination-link.is-current {
  background: transparent !important;
  color: palette(blue) !important;
  font-weight: bold !important;
}

.pagination-previous,
.pagination-next {
  width: 32px;
  height: 24px !important;
  background: #fff !important;
  border: 1px solid palette(grey, xxx-light) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.pagination {
  @include get-spacing(mb,s);
}

.pagination a .rb-icon::before {
  font-size: 14px !important;
  color: palette(grey, lighter) !important;
}

.pagination-previous:active,
.pagination-next:active,
.pagination-link:active {
  box-shadow: none !important;
}

.rb-link {
  color: palette(grey, mid-light);

  &:hover {
    color: palette(grey, light);
  }
}

.link--asin {
  color: palette(grey, lighter);

  &:hover {
    text-decoration: underline;
  }
}

.asin_select {
  z-index: 19;
}

.custom-chart-legend {
  box-shadow: 0 0 4px 0 #caccce;
  min-width: 100px;

  @include get-spacing(p,m);
  @include get-border-width(m);
  @extend .u-border-top;
  @extend .u-border-radius-xs;
  @include get-spacing(mr,m);
}

.c3 svg {
  overflow: visible !important;
}

.c3 .c3-line, .c3-circle {
  stroke-width: 2px!important;
}

.c3-xgrid-focus {
  stroke: $primaryColor !important;
}
.detail-view--card {
  box-shadow: 0 1px 4px 0 rgba(43, 51, 59, 0.15);
  border-radius: 3px;

  &.chart--card,
  &.detail--chart {
    max-width: 666px;

    .date--block {
      border-top: 1px solid palette(grey, xxx-light);
    }
  }

  &.detail--chart,
  .detail--chart {
    height: 322px;
    padding-bottom: 24px;
  }

  .date--block {
    padding-left: 16px;
    font-size: 13px;
  }

  .el-table {
    border-radius: 4px;
  }
}

.c3-xgrid {
  stroke: #e9eaeb !important;
  stroke-dasharray: 0;
}

.c3-ygrid {
  stroke: #e9eaeb !important;
  stroke-dasharray: 0;
}

.c3-axis .tick line {
  display: none;
}

.c3-large.graphWithGrids {
  max-height: 800px !important;
}

.graphWithGrids .c3-event-rects {
  opacity: 1 !important;
  fill: transparent;
  stroke-width: 1px;
  stroke: #e9eaeb;
}

.c3-axis path {
  &.domain {
    opacity: 0;
  }
}

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

.bg__full-screen--semitransparent {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(43, 51, 59, 0.4);
  z-index: 10000;
  overflow-y: auto;

  .dialog--center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.action--text {
  color: palette(grey, lighter);

  &:hover {
    color: palette(grey, light);
  }
}

.icon--search .rb-button--icon {
  background: palette(blue, base);
  border-color: palette(blue, base);
  color: white;
  padding: 0 14px;
}

.feedback-button .rb-button--text .rb-button__content:hover {
  color: palette(grey, mid-light);
}

.clickToExpandParent {
  position: relative !important;
  height: 100%;

  .cell {
    position: absolute;
    height: auto;
    background: white;
    display: flex;
    right: 5px;
    margin: auto;
    left: 0;
    z-index: 3;
    padding: 5px !important;
    width: 100%;
    overflow: auto;
    border: solid 1px #e9eaeb;
    border-radius: 4px;
    box-shadow: 0 5px 20px #e9eaeb;
  }

  .clickToExpandItem {
    white-space: normal !important;
    padding: 5px;
    word-break: break-word;
  }
}

.tippy-tooltip {
  font-size: 13px;
  font-weight: 600;
  padding: 8px;
  line-height: 1.2;
  text-align: left;
}

.tippy-popper .tippy-tooltip.light-theme {
  color: #2b333b;
  box-shadow: 1px 1px 6px 2px rgba(43, 51, 59, 0.15);
}

.tippy-popper .tippy-tooltip.dropdown-theme {
  background: #fff;
  color: #2b333b;
  padding: 0px;
  box-shadow: 0 0 8px 0 rgba(43, 51, 59, 0.25);

  .tippy-backdrop {
    background: #fff;
  }
}

.tippy-popper .tippy-tooltip.click-to-expand-theme {
  background: #fff;
  color: #2b333b;
  min-height: 67px;
  font-weight: normal;
  box-shadow: 1px 1px 6px 2px rgba(43, 51, 59, 0.15);
  max-height: 320px;
  overflow-y: auto;
  word-break: break-all;
}

.tippy-tooltip.click-to-expand-theme .tippy-backdrop {
  background-color: #fff;
  height: 0px;
}

.simulated-strategy-modal {
  .rb-modal {
    .rb-modal-background {
      background: rgba(43,51,59,.4);
    }
  }
}

.tippy-tooltip.rb-tooltip-header-theme {
  background: none;
  padding: 4px;

  .tippy-arrow {
    border-bottom-color: #fff;
  }
  .tippy-backdrop {
    background: none;
  }
}

.tippy-tooltip.rb-tooltip-sku-theme {
  box-shadow: rgba(43, 51, 59, 0.15) 1px 1px 6px 2px;
  .tippy-backdrop {
    background: #fff;
  }

  .tippy-content {
    .rb-sku {
      .sku--content {
        .top-row {
          .title {
            cursor: default;
          }
        }
        .middle-row {
          @extend .u-font-weight-normal;
        }
      }
    }
  }
}

.ams-campaigns-add-keyword {
  .rb-button--hollow .rb-button__content .rb-button__text {
    white-space: nowrap !important;
  }
}

.ams-campaigns-recommendationsChkBox {
  .rb-checkbox.checkbox {
    .rb-control-label {
      max-width: fit-content !important;
      color: #4b5158;
    }
  }
}

.date-compare--select-s .rb-select-menu {
  height: 104px;
  overflow: auto;
}

.date-compare--select-l .rb-select-menu {
  height: 208px;
  overflow: auto;
}

.u-font-style-italic {
  font-style: italic;
}

.select__dropdown-list-item {
  padding: 8px 24px !important;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: normal;
  color: inherit;

  &:hover {
    background: palette(blue, base);
    * {
      color: white!important;
      fill: white!important;
    }

    .rb-icon:before {
      color: white!important;
      fill: white!important;
    }
  }
}

.campaigns-select {
  .select__dropdown-list-item {
    padding: 0px !important;
  }
}

#wootric-modal.wootric-bottom.show {
  top: 0px !important;
  margin: auto;
  display: flex;
  background: rgba(43, 51, 59, 0.85);
}

#wootric-modal.wootric-bottom {
  bottom: 0px;
}

.wootric-footer {
  display: none !important;
}

.wootric-beacon-contents {
  padding: 104px 0px !important;
}

#wootric-modal .wootric-beacon-parent {
  width: 70%!important;
  margin: auto;
  display: flex;
  border: none!important;
  border-radius: 4px;
  overflow: auto;
}

#wootric-modal #wootric-form {
  background: white;
}

#wootric-question p {
  color: #2b333b !important;
  opacity: 0.85;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  padding: 0px 16px 16px!important;
}

#wootric-modal label {
  color: #1485f9 !important;
  opacity: 0.85;
  font-size: 1.4rem !important;
  margin: 0 20px !important;
  font-style: normal!important;
}

#wootric-modal li {
  color: #8b8f93 !important;
  opacity: 0.85;
  font-size: 1.4rem !important;
  border: 1px solid #8b8f93 !important;
  margin: 0px 4px;
  text-shadow: none !important;
}

#wootric-modal #wootric-close {
  top: 16px !important;
  right: 16px;
}

#wootric-feedback {
  margin-bottom: 3rem!important;
}

#wootric-modal li:focus, #wootric-modal li:hover {
  background: #007cf6 !important;
  color: white!important;
  border: solid 1px #007cf6!important;
}
#wootric-modal li.selected, #wootric-modal li.selected:hover {
  background-color: #3b96f7 !important;
  color: white !important;
}
#wootric-modal #wootric-thanks p {
  color: #3996f9 !important;
}

#wootric-modal #wootric-not-likely-label {
  color: #d7263d!important;
  text-shadow: none!important;
}

#wootric-modal #wootric-likely-label {
  color: #3ea95e!important;
  text-shadow: none!important;
}

#wootric-modal textarea {
  line-height: 11px !important;
  color: black !important;
  background-color: rgb(245, 247, 250) !important;
  border: 1px solid rgb(228, 243, 253) !important;
}
#wootric-modal #wootric-submit {
  line-height: 5px !important;
  background: rgba(0, 124, 245, 0.79) !important;
}

.filter--token {
  @extend .u-font-size-7;
  @extend .u-font-weight-600;
  padding: 10px 8px 9px;
  background: #fff;
  color: palette(grey, lighter);
  border: 1px solid palette(grey, xxx-light);
  border-radius: 24px;
}

.local-filter--token,.circular-date-picker-trigger {
  @extend .u-font-size-7;
  @extend .u-font-weight-600;
  @include get-line-height(1);
  padding: 7px 8px 6px;
  color: palette(grey, lighter);
  border: 1px solid palette(grey, xxx-light);
  border-radius: 24px;
}

.boomerangActionsCell {
  ul {
    list-style: decimal;

    li {
      list-style-type: decimal;
      margin-left: 12px;
    }
  }
}

.cellHover {
  display: none;
}
.ag-row-hover .cellHover {
  display: inline-flex;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.90);
  padding: 0px 10px;
}

.rb-control-s {
  .rb-input {
    height: 27px !important;
    padding: 8px !important;
    border-radius: 4px !important;
  }
}

.u-line-height-1-3 {
  line-height: 1.3
}

.pop-up-on-hover {
  height: 14px;
  z-index: 100;
  position: relative;
  visibility: hidden;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  cursor: pointer;
  @include get-spacing(mr,m);
}

.card-pop-over-holder:hover  .pop-up-on-hover{
  visibility: visible;
  // box-shadow: 0 -2 8px 0 rgba(75, 81, 88, 0.4);
  // box-shadow: 0 -1px 8px 0 rgba(75, 81, 88, 0.4);
}

.card-pop-over-holder:hover .custom-chart-legend {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.metric-card-hover {
  visibility: hidden;
  height:3px;
}

.metric-card-hover-trigger:hover  .metric-card-hover{
  height:3px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  visibility: visible;
  opacity: 0.50;
}

.active-metric-card {
  height:3px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.workbench-hover-card {
  padding: 0 !important;
  border: 0 !important;
}

.metric-card-hover-trigger:hover  .workbench-hover-card {
  box-shadow: 0 0 8px 0 #caccce
}
.no-border {
  border: 0;
}

.top-0 {
  top: 0
}

.z-index-2 {
  z-index: 2;
}

.u-position-sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
}

.isHighlighted {
  background-color: $primaryColor;
  color: white;
  border: 0;
}

.mini-spinner {
  border: 1px solid palette(grey, xx-light);
  width: 36px;
  text-align: center;
  border-radius: 2px;
  padding: 2px;
}

.mini-spinner > div {
  width: 6px;
  height: 6px;
  background-color: #6a7075;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.mini-spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.mini-spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.u-line-height-1-3 {
  line-height: 1.3;
}

.shortlistable_search_input_field {
    height: 27px !important;
    border-radius: 2px !important;
    font-size: 11px !important;
    padding-right: 32px !important;
    background: white !important;
    border: none !important;
  &:focus {
      border: none !important;
      background: white !important;
      box-shadow: 0px 0px 4px #caccce !important;
  }
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.tippy-tooltip.page-snapshot-theme {
  font-size: 10px;
  padding: 4px;
}

.pageBackground{
  background: $pageBackground !important;
}

.opacity-0_5 {
  opacity: 0.5 !important;
}

.u-line-height-1-1 {
  line-height: 1.1;
}

@supports not (-webkit-line-clamp: 1) {
  .u-clamp-1, .u-clamp-2, .u-clamp-3, .u-clamp-4, .u-clamp-5 {
    .cell--content {
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap;
    }
  }
}

@supports (-webkit-line-clamp: 1) {
  .u-clamp-1 {
    .cell--content {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      white-space: normal !important;
      word-break: break-all;
    }
  }

  .u-clamp-2 {
    .cell--content {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal !important;
      word-break: break-all;
    }
  }

  .u-clamp-3 {
    .cell--content {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      white-space: normal !important;
      word-break: break-all;
    }
  }

  .u-clamp-4 {
    .cell--content {
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      white-space: normal !important;
      word-break: break-all;
    }
  }

  .u-clamp-5 {
    .cell--content {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      white-space: normal !important;
      word-break: break-all;
    }
  }
}

.hollow-outlined-btn {
  border-color: palette(blue, base) !important;
  color: palette(blue, base) !important;
}

.open-filter-btn .rb-icon::before {
  font-size: 13px !important;
}

.u-line-height-1-5 {
  line-height: 1.5;
}

.hide_calendar_strategy {
  display: none !important;
}

.timePeriod_wrp {
  .vdp-datepicker__calendar {
    right: auto;
    top: 0;
    font-size: 13px;
    color: #8b8f93;
    border-radius: 5px;
    border: 1px #ccc solid;
    box-shadow: 0 0 10px #ccc;
  }
}

.u-scope-filter_wrp,  .u-condition-filter_wrp {
  .filter-dropdown-content {
    max-height: 170px !important;
  }
  .filter-dropdown-menu {
    margin-bottom: 48px;
  }
}


.show_on_hover {
  .text_title {
    visibility: hidden;
  }
}

.strategy_list:hover {
  .text_title {
    visibility: visible;
  }
}

.show_on_hover:hover {
  .text_title{
    visibility: visible;
  }
}

.u-spacing-mr-12 {
  margin-right: 12px;
}

.u-margin-top-80 {
  margin-top: 80px;
}

.u-margin-bottom-40{
  margin-bottom: 40px;
}

.padding-right-none {
  padding-left: 8px!important;
  padding-right: 4px!important;
}

.forecast-c3-ygrid-color line {
  stroke: #23b5d3;
  // stroke-dasharray: 5 , 5;
  stroke-width: 1px;
}

.forecast-radio-wrapper {
  .rb-radio.radio {
    .rb-control-label {
      max-width: 100%;
      color: palette(grey, light);
      font-weight: 400;
    }
  }
}

.forecast-calendar-input {
  .rb-input[disabled] {
    border-radius: 4px !important;
    color: palette(grey, mid-light) !important;
    border: 1px solid palette(grey, xxx-light) !important;
    background: palette(grey, white) !important;
  }
}

.v2-forecast {
  .ag-pinned-left-header {
    .ag-header-row:nth-child(1) {
      display: none;
    }
    .ag-header-row:nth-child(2) {
      height: 104px !important;
      top: 0px !important;

      .ag-header-cell {
        .header-text {
          @extend .u-flex-justify-content-center;
        }
      }
    }
  }
  .ag-header-row {
    .ag-header-group-cell {
      border-top: 1px solid palette(grey, xxx-light);
    }

    .ag-header-group-cell.ag-header-group-cell-with-group {
      // border-left: 1px solid palette(grey, xxx-light);
      border-right: 1px solid palette(grey, xxx-light);

      @extend .u-flex-justify-content-center;
    }
    .ag-header-group-cell.ag-header-group-cell-with-group {
      .ag-header-group-cell-label {
        .ag-header-group-text {
          @include get-line-height(1);
          @extend .u-font-weight-600;
          @extend .u-color-grey-lighter;
          @extend .u-font-size-7;
        }
      }
    }
  }
  .c3 svg {
    font-family: 'ProximaNova', sans-serif;
    @extend .u-font-size-7;

    .c3-axis-y-label,
    .c3-axis-y2-label {
      fill: palette(grey, base);

      @extend .u-font-size-4;
      @extend .u-font-weight-600;
    }
  }
}

@include generate-media-below  (lg) {
  .v2-forecast {
    .forecast-options {
      .text-container {
        display: none;
      }
      .rb-icon.no-margin {
        margin-left: 0px;
      }
    }
    .forecastFilterSection {
      max-width: 100px;
    }
  }
}

// Base line fix for Button filled with Icon Component.
.baseLine {
  .rb-button__content {
    align-items: baseline !important;
  }
}

.u-margin-bottom-80 {
  margin-bottom: 80px;
}