@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/mixins" as *;
@use "../../base/switch";

// adduse


$generic-switch-border-weight: 1px;
$generic-switch-inner-size: $generic-switch-height - $generic-switch-border-weight * 2;

.dx-switch {
  width: $generic-switch-width;
  height: $generic-switch-height;

  &.dx-state-readonly {
    .dx-switch-container {
      border-color: $switch-readonly-border-color;
      background-color: $switch-container-readonly-bg;
    }
  }

  &.dx-state-active {
    .dx-switch-handle::before {
      background-color: $switch-handle-active-bg;
    }

    .dx-switch-container {
      border-color: $switch-active-border-color;
      background-color: $switch-container-active-bg;
    }
  }

  &.dx-state-hover {
    .dx-switch-handle::before {
      background-color: $switch-handle-bg;
    }

    .dx-switch-container {
      background-color: $switch-hover-bg;
      border-color: $switch-hover-border-color;
    }
  }

  &.dx-state-focused {
    .dx-switch-container {
      border-color: $switch-focused-border-color;
    }

    .dx-switch-handle::before {
      background-color: $switch-handle-bg;
    }

    &.dx-state-active {
      .dx-switch-handle::before {
        background-color: $switch-handle-active-bg;
      }
    }
  }
}

.dx-switch-container {
  overflow: hidden;
  margin: 0 (-$generic-switch-container-adjustment) 0 0;
  padding: 0 $generic-switch-handle-offset;
  height: $generic-switch-height;
  border: $generic-switch-border-weight solid $switch-border-color;
  background: $switch-bg;
  border-radius: $switch-border-radius;
}

.dx-switch-inner {
  width: 200%;
  height: 100%;
}

.dx-switch-on,
.dx-switch-off {
  float: left;
  flex-shrink: 0;
  width: 50%;
  padding-right: $generic-switch-handle-width + $generic-switch-on-off-adding-padding;
  line-height: $generic-switch-inner-size;
  text-align: center;
  font-size: $generic-switch-font-size;
  font-weight: 600;

  @include dx-overflow();

  box-sizing: border-box;
}

.dx-switch-off {
  padding-left: $generic-switch-handle-offset;
  color: $switch-off-color;
}

.dx-switch-on {
  color: $switch-on-color;
}

.dx-switch-handle {
  position: relative;
  float: left;
  flex-basis: $generic-switch-handle-width;
  flex-shrink: 0;
  width: $generic-switch-handle-width;
  height: $generic-switch-inner-size - $generic-switch-handle-offset * 2;
  margin-top: $generic-switch-handle-offset;
  box-sizing: border-box;

  &::before {
    display: block;
    content: ' ';
    width: 100%;
    height: 100%;
    background-color: $switch-handle-off-bg;
    border-radius: $switch-handle-border-radius;
  }
}

.dx-switch-on-value {
  .dx-switch-handle::before {
    background-color: $switch-handle-bg;
  }
}

.dx-rtl .dx-switch,
.dx-switch.dx-rtl {
  .dx-switch-on,
  .dx-switch-off {
    float: right;
  }

  .dx-switch-on {
    padding-left: $generic-switch-handle-width + $generic-switch-on-off-adding-padding;
    padding-right: $generic-switch-handle-offset;
  }

  .dx-switch-off {
    margin-left: 0;
  }

  .dx-switch-handle {
    float: right;
    margin-left: 0;
    margin-right: -$generic-switch-handle-width;
  }

  .dx-switch-container {
    margin: 0 0 0 (-$generic-switch-container-adjustment);
  }
}

.dx-invalid {
  &.dx-switch .dx-switch-container {
    border-color: $base-invalid-faded-border-color;
  }

  &.dx-state-focused,
  &.dx-state-hover {
    .dx-switch-container {
      border-color: $base-invalid-color;
    }
  }

  &.dx-state-focused,
  &.dx-state-hover,
  &.dx-switch-on-value {
    .dx-switch-handle::before {
      background-color: $base-invalid-color;
    }
  }

  .dx-switch-handle::before {
    background-color: $base-invalid-faded-border-color;
  }
}