/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */

@import "./mixin";

.utrecht-form-toggle {
  @include utrecht-form-toggle;
  @include utrecht-form-toggle--media-query-forced-colors;
}

.utrecht-form-toggle--focus {
  @include utrecht-form-toggle--focus;
}

.utrecht-form-toggle--focus-visible {
  @include utrecht-form-toggle--focus-visible;
}

.utrecht-form-toggle--hover {
  @include utrecht-form-toggle--hover;
}

.utrecht-form-toggle--disabled {
  @include utrecht-form-toggle--disabled;
}

.utrecht-form-toggle__thumb {
  @include utrecht-form-toggle__thumb;
}

.utrecht-form-toggle__thumb--checked {
  @include utrecht-form-toggle__thumb--checked;
}

.utrecht-form-toggle__thumb--not-checked {
  @include utrecht-form-toggle__thumb--not-checked;
}

.utrecht-form-toggle__thumb--disabled {
  @include utrecht-form-toggle__thumb--disabled;
}

.utrecht-form-toggle__track {
  @include utrecht-form-toggle__track;
}

.utrecht-form-toggle__track--html-label {
  @include utrecht-form-toggle__track--html-label;
}

.utrecht-form-toggle__track--checked {
  @include utrecht-form-toggle__track--checked;
}

.utrecht-form-toggle__track--disabled {
  @include utrecht-form-toggle__track--disabled;
}

.utrecht-form-toggle__track--focus-visible {
  @include utrecht-form-toggle__track--focus-visible;
}

.utrecht-form-toggle--html-checkbox {
  .utrecht-form-toggle__checkbox {
    @include invisible-but-focusable;

    &:focus-visible ~ .utrecht-form-toggle__track {
      @include utrecht-form-toggle__track--focus-visible;
    }

    &:checked ~ .utrecht-form-toggle__track {
      @extend .utrecht-form-toggle__track--checked;
    }

    &:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
      @extend .utrecht-form-toggle__thumb--checked;
    }

    &:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
      @extend .utrecht-form-toggle__thumb--not-checked;
    }

    &:disabled ~ .utrecht-form-toggle__track {
      @extend .utrecht-form-toggle__track--disabled;
    }

    &:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb {
      @extend .utrecht-form-toggle__thumb--disabled;
    }
  }
}

.utrecht-form-toggle--html-div {
  &:focus {
    @extend .utrecht-form-toggle--focus;
  }
  &:focus-visible {
    @extend .utrecht-form-toggle--focus-visible;
  }
  &:hover {
    @extend .utrecht-form-toggle--focus;
  }
  &:disabled {
    @extend .utrecht-form-toggle--disabled;
  }
}