/* stylelint-disable selector-max-compound-selectors */

@use '../../helpers';
@use '../../mixins';

@mixin Switch() {
  @if not mixins.includes('Switch') {
    @include _Switch();
  }
}

@mixin _Switch() {
  .ods-switch-label {
    // Hover
    $handle-bg: helpers.color('background-switch-handle-unselected-hover');
    $disabled-bg: helpers.color('background-switch-handle-unselected-disabled');

    $hdle-dsbl-bg: helpers.color('background-switch-handle-selected-hover');

    align-items: center;
    color: helpers.color('content-main');
    cursor: pointer;
    display: inline-flex;
    gap: helpers.space(1);
    position: relative;

    input {
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }

    input + .ods-switch-indicator:hover {
      border-color: $handle-bg;
    }

    input + .ods-switch-indicator:hover::before {
      background-color: $handle-bg;
    }

    input + .ods-switch-indicator:hover .ods-icon {
      fill: $handle-bg;
    }

    // Checked
    input:checked + .ods-switch-indicator {
      background-color: helpers.color('background-switch-selected');
      border-color: helpers.color('border-switch-selected');
    }

    input:checked + .ods-switch-indicator::before {
      background-color: helpers.color('background-switch-handle-selected');
      transform: translateY(-50%) translateX(helpers.space(2));
    }

    input:checked + .ods-switch-indicator .ods-icon {
      opacity: 1;
      transform: translateY(-50%) translateX(helpers.space(2));
      transition: //
        opacity helpers.time(1.3) ease-out helpers.time(1.3),
        transform helpers.time(1.3) ease-out;
    }

    input:checked + .ods-switch-indicator:hover {
      background-color: helpers.color('background-switch-selected-hover');
      border-color: helpers.color('border-switch-selected-hover');
    }

    input:checked + .ods-switch-indicator:hover .ods-icon {
      fill: helpers.color('content-switch-handle-selected-hover');
    }

    // Focus
    input:focus + .ods-switch-indicator {
      box-shadow: //
        0 0 0 helpers.space(0.25) helpers.color('border-focus-inner'),
        0 0 0 helpers.space(0.5) helpers.color('border-action-focus');
    }

    // Disabled
    input:disabled + .ods-switch-indicator {
      cursor: not-allowed;
    }

    input:disabled + .ods-switch-indicator,
    input:disabled + .ods-switch-indicator:hover,
    input:disabled + .ods-switch-indicator .ods-icon {
      border-color: helpers.color('border-switch-selected-disabled');
    }

    input:disabled + .ods-switch-indicator:hover .ods-icon {
      fill: helpers.color('content-switch-handle-selected-disabled');
    }

    input:disabled:checked + .ods-switch-indicator,
    input:disabled + .ods-switch-indicator::before {
      background-color: $disabled-bg;
    }

    input:disabled + .ods-switch-indicator .ods-icon {
      fill: helpers.color('content-switch-handle-selected-disabled');
    }

    input:disabled:checked + .ods-switch-indicator::before {
      background-color: $hdle-dsbl-bg;
    }
  }

  .ods-switch-indicator {
    $border-width: helpers.space(0.25);

    background-color: helpers.color('background-input');
    border: $border-width solid helpers.color('border-input');
    border-radius: helpers.border-radius('full');
    box-sizing: border-box;
    height: helpers.space(3);
    margin: helpers.space(1.5) helpers.space(1);
    min-width: helpers.space(5);
    position: relative;
    width: helpers.space(5);

    // slider
    &::before {
      background-color: helpers.color('background-switch-handle-unselected');
      border-radius: helpers.border-radius('full');
      content: '';
      display: inline-block;
      height: 18px;
      left: 1px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
    }

    // check icon
    .ods-icon {
      content: '';
      fill: helpers.color('content-switch-handle-selected');
      height: helpers.space(2);
      left: 2px;
      opacity: 0;
      position: absolute;
      top: calc(50% - 1px);
      transform: translateY(-50%) translateX(0);
      width: helpers.space(2);
    }

    .ods-icon,
    &::before {
      transition: transform helpers.time(1.3) ease-out;
    }
  }
}