@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;
@use './baseline/baseline.scss' as baseline;

$classname: '#{utils.$prefix}-checkbox';
// Color variables
$color-unchecked: tokens.$color-neutral-grey-600;
$color-checked: tokens.$color-interface-interaction;
$color-disabled: tokens.$color-neutral-grey-500;
// Size variables
$size-medium: tokens.$spacing-base-6;
$size-large: tokens.$spacing-base-8;
$padding-label-medium: tokens.$spacing-base-2;
$padding-label-large: tokens.$spacing-base-3;

.#{$classname} {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;

  & input.#{$classname}__input {
    cursor: pointer;
    // Hide browser-default checkmark appearance
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;

    // Focus outline
    &:focus {
      outline: none;
    }
    &:focus-visible ~ .#{$classname}__label {
      @include baseline.focus-outline();
    }
    // Compatibility for browsers not supporting :focus-visible (Safari, IE)
    &:focus ~ .#{$classname}__label {
      @include baseline.focus-outline();
    }
    &:focus:not(:focus-visible) ~ .#{$classname}__label {
      outline: none;
    }
  }

  &__label {
    display: flex;
    align-items: center;
    position: relative;

    padding-left: $size-medium + $padding-label-medium;
    min-height: $size-medium;

    cursor: pointer;
    @include typography.text-body-300();
    color: tokens.$color-text-background-light;

    // Checkbox button container
    &::before {
      content: '';
      display: inline-block;
      box-sizing: border-box;
      position: absolute;
      left: 0;

      background-repeat: no-repeat;
      background-position: 50%;

      // Medium size
      width: $size-medium;
      height: $size-medium;

      border: tokens.$border-width-default solid $color-unchecked;

      transition: tokens.$duration-fast;
      transition-property: border-color, background-image;
    }
  }

  &:not([class*='#{$classname}--disabled']) > input.#{$classname}__input {
    &:hover:not(:checked) ~ .#{$classname}__label::before {
      background-image: #{utils.$icon-url-checkmark-hover};
      border-color: $color-checked;
    }

    &:checked ~ .#{$classname}__label::before {
      background-image: #{utils.$icon-url-checkmark};
      border-color: $color-checked;
    }
  }

  &--disabled {
    &:active {
      pointer-events: none;
    }

    & > .#{$classname}__label {
      cursor: not-allowed;
      color: $color-disabled;
      &::before {
        border-color: $color-disabled;
      }
    }
    & > input.#{$classname}__input:checked ~ .#{$classname}__label::before {
      background-image: #{utils.$icon-url-checkmark-disabled};
    }
  }

  // Size modifiers
  &--large {
    & > .#{$classname}__label {
      min-height: $size-large;
      padding-left: $size-large + $padding-label-large;
      @include typography.text-body-400();
    }
    & > .#{$classname}__label::before {
      width: $size-large;
      height: $size-large;
    }
    &:not([class*='#{$classname}--disabled']) > input.#{$classname}__input {
      &:hover:not(:checked) ~ .#{$classname}__label::before {
        background-image: #{utils.$icon-url-checkmark-large-hover};
        border-color: $color-checked;
      }

      &:checked ~ .#{$classname}__label::before {
        background-image: #{utils.$icon-url-checkmark-large};
        border-color: $color-checked;
      }
    }
    &.#{$classname}--disabled
      > input.#{$classname}__input:checked
      ~ .#{$classname}__label::before {
      background-image: #{utils.$icon-url-checkmark-large-disabled};
    }
  }
}