@import "palette";

@bg-color: #ffffff;
@bg-hover: #efefef;
@bg-active: #f3f3f3;
@bg-grey: #dfdfdf;
@border-color: #e0dfdb;
@text-main-color: #343434;

@basic-green: #36ba53;
@dark-green: darken(@basic-green, 5%);

@input-border: #cfcfcf;

@close-image: url("../img/close.svg");

// == Figma variables ==
@text-main-text-main-default: @gray-80;
@text-main-text-main-disabled: @gray-50;
@text-description-description-default: @gray-70;
@text-buttons-primary-default: @gray-0;

@fills-backgrounds-cards-background-default: @gray-0;
@fills-buttons-secondary-card-button-default: @gray-0;
@fills-buttons-secondary-card-button-hovered: @gray-10;
@fills-buttons-secondary-card-button-pressed: @gray-20;
@fills-buttons-danger-button-default: @red-50;
@fills-buttons-danger-button-hovered: @red-60;
@fills-buttons-danger-button-pressed: @red-70;
@fills-buttons-danger-button-disabled: @red-30;
@fills-inputs-input-background-default: @gray-10;
@fills-switch-all-off-default: @gray-40;
@fills-switch-all-on-default: @product-primary-50;

@stroke-dividers-item-divider-default: @gray-30;
@stroke-buttons-secondary-default: @gray-80;
@stroke-buttons-secondary-disabled: @gray-50;
@stroke-icons-gray-icons-default: @gray-60;
@stroke-icons-product-icon-default: @product-primary-50;
@stroke-inputs-inactive-input-stroke-default: @gray-30;

body {
  color: @text-main-text-main-default;
}

.main {
  background: @fills-backgrounds-cards-background-default;
  &-popup {
    &__btn {
      background: @bg-color;
      border: 1px solid @input-border;
      &:hover {
        background-color: @bg-hover;
      }
    }
  }
  &-menu {
    &__btn {
      background-color: @bg-color;
      &:hover {
        background-color: @bg-hover;
      }
      &:active, &.active {
        background-color: @bg-active;
      }
    }
  }
  &-version {
    color: @bg-grey;
  }
  &_close {
    color: @stroke-icons-gray-icons-default;
    &:hover {
      color: @text-main-text-main-default;
    }
  }
}

.head {
  &_title {
    color: @text-main-text-main-default;
  }

  &_text {
    color: @text-description-description-default;
  }

  &::after {
    background-color: @stroke-dividers-item-divider-default;
  }
}

.element-rule{
  &_expand-link{
    color: @text-main-text-main-default;
    &_arr {
      color: @stroke-icons-gray-icons-default;
      .element-rule_expand-link:hover & {
        color: @text-main-text-main-default;
      }
    }
  }
  &_text {
    color: @text-description-description-default;
  }
}

.close {
  background: @close-image no-repeat 0 0 / cover;
  opacity: 0.6;

  &:hover {
    opacity: 0.8;
  }
}

.form-control {
  color: @text-main-text-main-default;
  background-color: @fills-inputs-input-background-default;
  border-color: @stroke-inputs-inactive-input-stroke-default;
}

input[type="checkbox"] {
  & + .form-ui {
    .form-ui-txt {
      color: @text-main-text-main-default;
    }
    .form-ui-icon {
        &--off {
          color: @stroke-icons-gray-icons-default;
        }
        // Note: On color is same for both light and dark modes
        &--on {
          color: @stroke-icons-product-icon-default;
        }
    }
  }
}

.menu,
.menu-filter {
  border-top: 1px solid @border-color;
}

.settings {
  &_fieldset {
    border-top: 1px solid @border-color;
  }
}

.btn-primary {
  color: @text-main-text-main-default;
  background-color: @fills-buttons-secondary-card-button-default;
  border-color: @fills-buttons-secondary-card-button-default;
  &:hover,
  &:focus-visible {
    background-color: @fills-buttons-secondary-card-button-hovered;
    border-color: @fills-buttons-secondary-card-button-hovered;
  }
  &:active,
  &.active {
    background-color: @fills-buttons-secondary-card-button-pressed;
    border-color: @fills-buttons-secondary-card-button-pressed;
  }
  &:disabled,
  &[disabled],
  &.disabled {
    color: @text-main-text-main-disabled;
    background-color: @fills-buttons-secondary-card-button-default;
    border-color: @fills-buttons-secondary-card-button-default;
  }
}

// Note: Cancel button is same for both light and dark modes, except for disabled state
.btn-cancel {
  color: @text-buttons-primary-default;
  background-color: @fills-buttons-danger-button-default;
  border-color: @fills-buttons-danger-button-default;
  &:hover,
  &:focus-visible {
    background-color: @fills-buttons-danger-button-hovered;
    border-color: @fills-buttons-danger-button-hovered;
  }
  &:active,
  &.active {
    background-color: @fills-buttons-danger-button-pressed;
    border-color: @fills-buttons-danger-button-pressed;
  }
  &:disabled,
  &[disabled],
  &.disabled {
    background-color: @fills-buttons-danger-button-disabled;
    border-color: @fills-buttons-danger-button-disabled;
  }
}

.btn-default {
  color: @text-main-text-main-default;
  background-color: @fills-buttons-secondary-card-button-default;
  border-color: @stroke-buttons-secondary-default;
  &:hover,
  &:focus-visible {
    background-color: @fills-buttons-secondary-card-button-hovered;
  }
  &:active,
  &.active {
    background-color: @fills-buttons-secondary-card-button-pressed;
  }
  &:disabled,
  &[disabled],
  &.disabled {
    color: @text-main-text-main-disabled;
    background-color: @fills-buttons-secondary-card-button-default;
    border-color: @stroke-buttons-secondary-disabled;
  }
}

.change-position {
  &_input {
    &:checked {
      & + .change-position_label {
        border-color: @basic-green;
        background: @basic-green;
      }
    }
  }
}

input[type="radio"] {
  & + .form-ui{
    .form-ui-txt{
      &:before{
        background: @bg-color;
      }
    }
  }
  &:checked {
    & + .form-ui{
      .form-ui-txt{
        &:after{
          background: @basic-green;
        }
      }
    }
  }
}

.menu-head {
  &_title {
    color: @text-main-color;
  }
  &_text {
    color: @text-main-color;
  }
}

.menu-filter {
  &_handle {
    background: @bg-color;
  }
}

.adg-slide {
  &_clue {
    color: @text-main-text-main-default;
  }
  &_tick {
    background-color: @fills-switch-all-off-default;
  }
  // Note: Active tick and handle background color is same for both light and dark modes
  &_tick--active,
  &_handle {
    // Important to override dark mode value as media selector has more specificity
    background-color: @fills-switch-all-on-default !important;
  }
}

.old-btn-primary {
  border-color: @basic-green;
  background: @basic-green;
  color: #fff;
  &:hover {
    border-color: @dark-green;
    background: @dark-green;
    color: #fff;
  }
  &.active, &:active {
    border-color: @dark-green;
    background: @dark-green;
  }
  &.disabled, &[disabled] {
    border-color: @dark-green;
    background: @dark-green;
  }
}
