@use '../../foundations/borders/mixins.scss' as borders;
@use '../../foundations/spacing/tokens.scss' as spacing;
@use '../../foundations/colors/tokens.scss' as colors;
@use '../../foundations/colors/mixins.scss' as colorMixins;
@use '../../foundations/utilities/mixins.scss' as utilities;
@use '../../foundations/focus/mixins.scss' as focus;
@use '../../foundations/typography/mixins.scss' as typography;
@use '../../foundations/typography/tokens.scss' as typographyTokens;

.fudis-checkbox {
  @include typography.body-text-md-regular;
  @include colorMixins.text-color('gray-dark');

  display: inline-flex;
  position: relative;
  align-items: center;
  width: auto;
  min-height: spacing.$spacing-lg;

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

    &__text {
      position: relative;
      padding-right: spacing.$spacing-xs;
      padding-left: spacing.$spacing-xs;
    }

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

  &__content {
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    &--disabled {
      cursor: default;
    }

    &-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: spacing.$spacing-lg;
      min-height: spacing.$spacing-lg;
    }

    &__box {
      @include borders.border('1px', 'solid', 'gray-middle');

      display: flex;
      position: absolute;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      width: spacing.$checkbox-size;
      height: spacing.$checkbox-size;

      &__icon .fudis-icon {
        fill: colors.$color-gray-middle;
      }

      &--focused {
        @include focus.focus-checkbox;
      }

      &--disabled {
        @include borders.border('1px', 'dashed', 'gray-middle');
        @include colorMixins.bg-color('gray-extra-light');
      }

      &--invalid {
        @include borders.border('1px', 'solid', 'red');

        box-shadow: 0 0 0 spacing.$pixel-3 colors.$color-red-light;
      }
    }

    &__label {
      position: relative;
      padding-right: spacing.$spacing-xs;
      padding-left: spacing.$spacing-xs;
    }
  }

  &__required {
    @include typography.text-field-label;
    @include colorMixins.text-color('gray-middle');

    display: inline-block;
    vertical-align: baseline;
    text-transform: initial;
    /* stylelint-disable-next-line property-disallowed-list */
    line-height: typographyTokens.$text-input-line-height;
    /* stylelint-disable-next-line property-disallowed-list */
    font-size: typographyTokens.$body-text-sm-font-size;
  }

  &__input {
    @include utilities.box-reset;

    display: grid;
    place-content: center;
    opacity: 0;
    width: spacing.$pixel-1;
    height: spacing.$pixel-1;
  }

  /*
  * If CheckboxGroup is disabled through "disabled" Input, we need to set pointer-event to none for each checkbox.
  * This is not necessary when disabling comes through formControl.
  */
  &--disabled {
    pointer-events: none;
  }
}
/* stylelint-disable selector-class-pattern */
.fudis-checkbox.fudis-checkbox__label {
  cursor: pointer;
}