@import "../../themes/anywhere.globals.scss";

:host {
  /**
   * CSS variables for the checkbox component.
   * @prop --checkboxWidth: The width of the checkbox.
   * @prop --checkboxHeight: The height of the checkbox.
   * @prop --checkboxBorder: The border of the checkbox.
   * @prop --checkboxIconFontSize: The font size of the checkbox icon.
   * @prop --checkboxActiveBorderColor: The border color of the checkbox when active.
   * @prop --checkboxActiveBg: The background color of the checkbox when active.
   * @prop --checkboxIconActiveColor: The color of the checkbox icon when active.
   * @prop --checkboxActiveHoverBg: The background color of the checkbox when active and hovered.
   * @prop --checkboxIconActiveHoverColor: The color of the checkbox icon when active and hovered.
   * @prop --checkboxActiveHoverBorderColor: The border color of the checkbox when active and hovered.
   */

  display: inline-flex;
  align-items: center;
  // font-family: var(--fontFamily);

  .any-checkbox {
    display: inline-flex;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: bottom;
    width: var(--checkboxWidth);
    height: var(--checkboxHeight);

    .any-checkbox-box {
      display: flex;
      justify-content: center;
      align-items: center;

      border: var(--checkboxBorder);
      background: var(--inputBgColor);
      width: var(--checkboxWidth);
      height: var(--checkboxHeight);
      color: var(--textColor);
      border-radius: var(--borderRadius);
      transition: var(--formElementTransition);

      &.any-highlight {
        border-color: var(--checkboxActiveBorderColor);
        background: var(--checkboxActiveBg);
      }

      .any-checkbox-icon {
        transition-duration: var(--transitionDuration);
        color: var(--checkboxIconActiveColor);
        font-size: var(--fontSize);
      }
    }

    &:not(.any-checkbox-disabled) {
      .any-checkbox-box {
        &:hover {
          border-color: var(--inputHoverBorderColor);
        }

        &.any-focus {
          outline: var(--focusOutline);
          outline-offset: var(--focusOutlineOffset);
          box-shadow: var(--focusShadow);
          border-color: var(--checkboxActiveBorderColor);
        }

        &.any-highlight {
          &:hover {
            border-color: var(--checkboxActiveHoverBorderColor);
            background: var(--checkboxActiveHoverBg);
            color: var(--checkboxIconActiveHoverColor);
          }
        }
      }
    }
  }

  .any-checkbox-label {
    margin-left: 0.5rem;
  }
}
