/*
 * SPDX-FileCopyrightText: 2023 Siemens AG
 *
 * SPDX-License-Identifier: MIT
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

@use 'common-variables' as vars;

@mixin checkbox-basic() {
  $size: 1.125rem;

  /* Base for label styling */
  .ix-form-control[type='checkbox']:not(:checked),
  .ix-form-control[type='checkbox']:checked {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .ix-form-control[type='checkbox']:not(:checked) + label,
  .ix-form-control[type='checkbox']:checked + label {
    position: relative;
    display: inline-flex;
    user-select: none;
    color: var(--theme-checkbox-label--color);
    min-height: 1.5rem;
  }

  .ix-form-control[type='checkbox']:not(:disabled) + label {
    cursor: pointer;
  }

  .ix-form-control[type='checkbox'] + label:before {
    content: '';
    width: $size;
    height: $size;
    min-width: $size;
    min-height: $size;
    max-width: $size;
    max-height: $size;
    float: left;
    margin-right: vars.$small-space;
    margin-top: 1px;

    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
  }

  .ix-form-control[type='checkbox'] + label:focus-visible {
    &:before {
      outline: 0.0625rem solid var(--theme-color-focus-bdr);
      outline-offset: var(--theme-checkbox--focus--outline-offset);
    }
  }

  .ix-form-control[type='checkbox']:focus-visible + label {
    &:before {
      outline: 0.0625rem solid var(--theme-color-focus-bdr);
      outline-offset: var(--theme-checkbox--focus--outline-offset);
    }
  }

  .ix-form-control[type='checkbox']:not(:checked) {
    & + label:before {
      background-color: var(--theme-checkbox-unchecked--background);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-unchecked--border-color);
    }

    &:hover + label:before {
      background-color: var(--theme-checkbox-unchecked--background--hover);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-unchecked--border-color--hover);
    }

    &:active + label:before {
      background-color: var(--theme-checkbox-unchecked--background--active);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-unchecked--border-color--active);
    }

    &:disabled + label::before {
      background-color: var(--theme-checkbox-unchecked--background--disabled);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-unchecked--border-color--disabled);
    }
  }

  .ix-form-control[type='checkbox']:checked {
    & + label:before {
      background-color: var(--theme-checkbox-checked--background);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-checked--border-color);
    }

    & + label:after {
      content: '';
      width: 0.4rem;
      height: 0.26rem;
      display: block;
      border-top: none;
      border-right: none;
      border-bottom: 0.0625rem solid var(--theme-checkbox-checked--color);
      border-left: 0.0625rem solid var(--theme-checkbox-checked--color);
      position: absolute;
      margin: 0.525rem 0.42rem 0.1875rem;
      transform: translate(-1px, -3px) rotate(-53deg) scale(2)
        skew(-8deg, -3deg);
    }

    &:hover + label:before {
      background-color: var(--theme-checkbox-checked--background--hover);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-checked--border-color--hover);
    }

    &:active + label:before {
      background-color: var(--theme-checkbox-checked--background--active);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-checked--border-color--active);
    }

    &:disabled + label:before {
      background-color: var(--theme-checkbox-checked--background--disabled);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-checked--border-color--disabled);
    }

    &:disabled + label::after {
      border-color: var(--theme-checkbox-checked--color--disabled);
    }
  }

  .ix-form-control[type='checkbox']:disabled + label:before {
    pointer-events: none;
    opacity: 0.5;
  }

  .ix-form-control[type='checkbox']:indeterminate {
    & + label:after {
      content: '';
      display: block;
      width: 0.625rem;
      height: 0.125rem;
      border-bottom: 0.125rem solid var(--theme-checkbox-mixed--color);
      position: absolute;
      margin: 0.5625rem 0 0 0.25rem;
    }

    & + label:before {
      background-color: var(--theme-checkbox-mixed--background);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-mixed--border-color);
    }

    &:hover + label:before {
      background-color: var(--theme-checkbox-mixed--background--hover);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-mixed--border-color--hover);
    }

    &:active + label:before {
      background-color: var(--theme-checkbox-mixed--background--active);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-mixed--border-color--active);
    }

    &:disabled + label::before {
      background-color: var(--theme-checkbox-mixed--background--disabled);
      border: var(--theme-checkbox--border-thickness) solid
        var(--theme-checkbox-mixed--border-color--disabled);
    }

    &:disabled + label::after {
      border-color: var(--theme-checkbox-mixed--color--disabled);
    }
  }

  .ix-form-control[type='checkbox']:disabled + label {
    color: var(--theme-checkbox-label--color--disabled);
  }
}

@include checkbox-basic();