@import "../../styles/global-css-settings";
@import "../../styles/themes.scss";
@import "../../styles/typography.scss";
@import "../../styles/states.scss";

$checkbox-size: 16px;

@mixin hover-selected {
  @include theme-prop(background-color, primary-hover-color);
  border-color: transparent;
}

@mixin hover-unselected {
  @include theme-prop(border-color, secondary-text-color);
}

.monday-style-checkbox {
  position: relative;
  display: flex;
  align-items: center;
  width: fit-content;
  height: min-content;

  &__checkbox {
    cursor: pointer;
    visibility: visible;
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: $checkbox-size;
    width: $checkbox-size;
    border: 1px solid;
    @include theme-prop(border-color, ui-border-color);
    border-radius: $border-radius-extra-small;
    transition: transform 50ms $expand-animation-timing;
    position: relative;
    overflow: hidden;

    &:after {
      content: " ";
      background-color: transparent;
      position: absolute;
      height: $checkbox-size;
      z-index: 2;
      left: 0;
      right: 0;
      width: 100%;
    }

    &:hover {
      @include hover-unselected;
    }
  }

  &__icon {
    width: 100%;
    @include theme-prop(color, text-color-on-primary);
    visibility: hidden;
  }

  &__disabled {
    .monday-style-checkbox__label {
      @include theme-prop(color, disabled-text-color);
    }
  }

  &__label {
    @include font-input();
    cursor: pointer;
    user-select: none;
    margin-inline-start: $spacing-small;
    @include theme-prop(color, primary-text-color);
  }

  // Since it is not possible to change the design of the checkbox according to the requirements using css,
  // we hide the checkbox and draw a new one instead.
  // In order to allow accessibility, all operations will be performed on the hidden checkbox and be reflected
  // in the new checkbox we drew.
  &__input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;

    // For any active attribute in the hidden checkbox, we will change the appearance of the checkbox we drew in its place.
    &:focus {
      & + .monday-style-checkbox__checkbox {
        @include hover-unselected;
      }

      &:checked + .monday-style-checkbox__checkbox {
        @include hover-selected;
      }
    }
    &:focus-visible {
      & + .monday-style-checkbox__checkbox {
        outline: none;
        border: 1px solid;
        @include theme-prop(border-color, primary-color);
        box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5);
        border-radius: 2px;
      }
    }

    &:checked {
      &:focus + .monday-style-checkbox__checkbox:after {
        @include theme-prop(background-color, primary-hover-color);
      }

      & + .monday-style-checkbox {
        &__checkbox {
          animation: checkbox-grow-animation 50ms;
          &__prevent-animation {
            animation-duration: 0ms;
          }
          @include theme-prop(background-color, primary-color);
          border-color: transparent;

          &:hover {
            @include hover-selected;

            &:after {
              @include theme-prop(background-color, primary-hover-color);
            }
          }

          &:after {
            content: " ";
            @include theme-prop(background-color, primary-color);
            height: $checkbox-size;
            transform: scaleX(0);
            transition: transform 200ms;
            transform-origin: right;
            left: 0;
          }

          & > .monday-style-checkbox__icon {
            visibility: visible;
          }
        }
      }

      &:disabled + .monday-style-checkbox {
        &__checkbox:after {
          @include theme-prop(background-color, disabled-background-color);
        }
      }
    }
    &:disabled {
      & + .monday-style-checkbox {
        &__checkbox,
        &__checkbox:hover {
          @include theme-prop(background-color, disabled-background-color);
          @include theme-prop(border-color, ui-border-color);

          .monday-style-checkbox__icon {
            @include theme-prop(color, disabled-text-color);
          }
        }
      }
    }
  }
}

@keyframes checkbox-grow-animation {
  0% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}