@import "palette";

@bg-color: #323232;
@bg-hover: #555555;
@bg-active: #4d4d4d;
@border-color: #444;
@text-main-color: #ccc;

@basic-green: #4D995F;
@dark-green: #39774C;

@input-border: #666;

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

// == Figma variables ==
@text-main-text-main-default: @gray-20;
@text-description-description-default: @gray-30;

@fills-backgrounds-cards-background-default: @gray-80;
@fills-buttons-secondary-card-button-default: @gray-80;
@fills-buttons-secondary-card-button-hovered: @gray-70;
@fills-buttons-secondary-card-button-pressed: @gray-60;
@fills-buttons-danger-button-disabled: @red-90;
@fills-inputs-input-background-default: @gray-80;
@fills-switch-all-off-default: @gray-60;

@stroke-dividers-item-divider-default: @gray-70;
@stroke-buttons-secondary-default: @gray-20;
@stroke-icons-gray-icons-default: @gray-40;
@stroke-inputs-inactive-input-stroke-default: @gray-70;

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: @border-color;
  }
  &_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.7;

  &:hover {
    opacity: 1;
  }
}

.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;
    }
  }
}

.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;
  }
  // Note: In dark mode, only background and border color differs for disabled state
  &:disabled,
  &[disabled],
  &.disabled {
    background-color: @fills-buttons-secondary-card-button-default;
    border-color: @fills-buttons-secondary-card-button-default;
  }
}

// Note: Check light-mode.less for other state colors
.btn-cancel {
  &: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;
  }
  // Note: In dark mode, only background color differs for disabled state
  &:disabled,
  &[disabled],
  &.disabled {
    background-color: @fills-buttons-secondary-card-button-default;
  }
}

.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;
  }
}

.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;
  }
}
