@use "../../../2-tools/tools-index";
@use "../../../1-settings/class-vars";

#{class-vars.$base-class} {
  input[type="checkbox"] {
    width: var(--form-checkbox-medium);
    height: var(--form-checkbox-medium);
    position: relative;
    border-radius: var(--radius-small1x);
    border: 1px solid var(--gray-color);
    background-color: white;
    box-sizing: border-box;
    appearance: none;
    flex-shrink: 0;
    margin: 2px var(--spacing-xs) 0 0;

    @include tools-index.form-ele-focus;

    &::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: var(--radius-circle);
      z-index: -1;
      @include tools-index.form-ele-hover-base;
    }
    &:hover {
      border-color: black;
      &::after {
        @include tools-index.form-ele-hover-hovered(7px);
      }
    }

    &::before {
      content: '';
      display: block;
      background: var(--form-ele-color);
      background-image: var(--icon-check-mark-light);
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 30%;
      border-radius: var(--radius-small1x);
      width: 100%;
      height: 100%;
      opacity: 0;
    }
    &:checked {
      border-width: 0;
      background-color: var(--form-ele-color);
      &::before {
        opacity: 1;
        background-size: 80%;
        transition: background-size var(--timing-quick) ease, opacity var(--timing-quick) ease;
      }
    }
    &:disabled {
      background-color: var(--form-ele-disabled-color);
      border: none;
      cursor: not-allowed;
      &::before {
        background-color: var(--form-ele-disabled-color);
      }
    }
  }
  .input-wrapper {
    &--checkbox-inner {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      align-items: flex-start;
      position: relative;
      z-index: 1;
    }
  }
}