@use '~genesys-spark/dist/tokens/flare/ui.scss';
@use '~genesys-spark/dist/scss/checkbox-icons.scss';

@mixin gux-hide-offscreen {
  position: absolute;
  top: 0;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@mixin gux-unhide-offscreen {
  position: inherit;
  top: inherit;
  left: inherit;
  width: inherit;
  height: inherit;
  overflow: inherit;
}

@mixin gux-disabled-pointer {
  pointer-events: none;
  cursor: default;
}

@mixin gux-sr-only {
  @include gux-hide-offscreen;
}

@mixin button-text {
  font-family: ui.$gse-ui-button-text-fontFamily;
  font-size: ui.$gse-ui-button-text-fontSize;
  font-weight: ui.$gse-ui-button-text-fontWeight;
  line-height: ui.$gse-ui-button-text-lineHeight;
}

@mixin gux-sr-only-clip {
  // https://github.com/stylelint/stylelint/issues/8728
  /* stylelint-disable-next-line nesting-selector-no-missing-scoping-root */
  &:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

@mixin gux-menu-container {
  margin: 0;
  overflow-y: auto;
  background: var(--gse-ui-menu-backgroundColor);
  border-color: var(--gse-ui-menu-border-color);
  border-style: var(--gse-ui-menu-border-style);
  border-width: var(--gse-ui-menu-border-width);
  border-radius: var(--gse-ui-menu-borderRadius);
  box-shadow: var(--gse-ui-menu-boxShadow);
}

@mixin gux-empty-button {
  padding: 0;
  margin: 0;
  color: inherit;
  background: none;
  border: none;
}

@mixin gux-menu-scrollbar {
  scrollbar-color: ui.$gse-ui-menu-border-color transparent;
  scrollbar-width: thin;
}

@mixin gux-checkbox-style {
  input[type='checkbox'] {
    display: inline-grid;
    inline-size: ui.$gse-ui-checkbox-icon-width;
    block-size: ui.$gse-ui-checkbox-icon-height;
    margin: 0;
    vertical-align: middle;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: 0;

    &::before {
      grid-area: 1/1;
      content: '';
      border-radius: 15%;
    }

    &:focus-visible {
      outline: ui.$gse-ui-checkbox-focus-border-width
        ui.$gse-ui-checkbox-focus-border-style
        ui.$gse-ui-checkbox-focus-border-color;
      outline-offset: ui.$gse-ui-checkbox-focus-offset;
      border-radius: ui.$gse-ui-checkbox-focus-borderRadiusSmall;
    }

    &:not(:checked)::before {
      @include checkbox-icons.unchecked;

      background: ui.$gse-ui-checkbox-icon-default-unselectedForegroundColor;
    }

    &:not(:checked):not(:disabled):not(:indeterminate):hover::before {
      @include checkbox-icons.unchecked-hover;

      background: ui.$gse-ui-checkbox-icon-hover-foregroundColor;
    }

    &:checked::before {
      @include checkbox-icons.checked;

      background: ui.$gse-ui-checkbox-icon-default-selectedForegroundColor;
    }

    &:checked:not(:disabled):hover::before {
      @include checkbox-icons.checked-hover;

      background: ui.$gse-ui-checkbox-icon-hover-foregroundColor;
    }

    &:indeterminate::before {
      @include checkbox-icons.indeterminate;

      background: ui.$gse-ui-checkbox-icon-default-selectedForegroundColor;
    }

    &:not(:disabled):indeterminate:hover::before {
      @include checkbox-icons.indeterminate-hover;

      background: ui.$gse-ui-checkbox-icon-hover-foregroundColor;
    }

    &:disabled::before {
      cursor: not-allowed;
    }
  }
}