import { css } from "lit";
const componentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }

.visually-hidden {
  box-sizing: border-box;
  display: flex;
  height: var(--ui-components-checkbox-touch-target-size);
  min-width: var(--ui-components-checkbox-touch-target-size);
  min-height: var(--ui-components-checkbox-touch-target-size);
  padding: 0px var(--ui-components-checkbox-margin);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
  cursor: pointer;
  outline: none;
}

.visually-hidden.state-loading {
    cursor: progress;
  }

.visually-hidden.disabled {
    cursor: not-allowed;
  }

.checkbox-container {
  display: flex;
  padding: 0px;
  align-items: center;
  justify-content: center;
}

.checkbox-loading-spinner {
  width: var(--global-size-spacing-icon-icon-size-small);
  height: var(--global-size-spacing-icon-icon-size-small);
  align-self: center;
  margin: auto;
  animation: checkbox-loading-spin 1000ms linear infinite;
}

.checkbox-loading-spinner circle {
    fill: none;
    stroke: currentColor;
    stroke-width: var(
      --ui-components-progressbars-progress-bar--circular-bar-weight-small
    );
    stroke-linecap: round;
    stroke-dasharray: 24 14;
  }

.state-loading.status-unchecked .checkbox-loading-spinner {
    color: var(--element-neutral-color);
  }

.state-loading.status-checked .checkbox-loading-spinner {
    color: var(--element-active-inverted-color);
  }

.state-loading.status-mixed .checkbox-loading-spinner {
    color: var(--instrument-enhanced-secondary-color);
  }

.checkbox-container.status-unchecked:not(.disabled):hover .checkbox-box {
  background: var(--indent-hover-background-color);
  border-color: var(--indent-hover-border-color);
}

.checkbox-container.status-unchecked:not(.disabled):active .checkbox-box {
  background: var(--indent-pressed-background-color);
  border-color: var(--indent-pressed-border-color);
}

.checkbox-container.status-unchecked:not(.disabled):focus-visible
  .checkbox-box {
  background: var(--indent-focused-background-color);
  border-color: var(--indent-focused-border-color);
}

.checkbox-container.status-checked:not(.disabled):hover .checkbox-box,
.checkbox-container.status-mixed:not(.disabled):hover .checkbox-box {
  background: var(--selected-hover-background-color);
  border-color: var(--selected-hover-border-color);
}

.checkbox-container.status-checked:not(.disabled):active .checkbox-box,
.checkbox-container.status-mixed:not(.disabled):active .checkbox-box {
  background: var(--selected-pressed-background-color);
  border-color: var(--selected-pressed-border-color);
}

.checkbox-container.status-checked:not(.disabled):focus-visible .checkbox-box,
.checkbox-container.status-mixed:not(.disabled):focus-visible .checkbox-box {
  background: var(--selected-focused-background-color);
  border-color: var(--selected-focused-border-color);
}

.checkbox-icon {
  width: var(--global-size-spacing-icon-icon-size-regular);
  height: var(--global-size-spacing-icon-icon-size-regular);
  flex-shrink: 0;
}

.status-checked .checkbox-icon {
    color: var(--on-selected-active-color);
  }

.status-unchecked:not(.no-hover-effects) {
            cursor: pointer;
}

.status-unchecked:not(.no-hover-effects):focus {
            outline: none;
}

.status-unchecked:not(.no-hover-effects) .checkbox-box {
            border-color: var(--indent-enabled-border-color);
            background-color: var(--indent-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--indent-enabled-border-color);
            --base-background-color: var(--indent-enabled-background-color);
}

.status-unchecked.activated:not(.no-hover-effects) .checkbox-box {
            border-color: var(--indent-activated-border-color);
            background-color: var(--indent-activated-background-color);
            --base-border-color: var(--indent-activated-border-color);
            --base-background-color: var(--indent-activated-background-color);
}

@media (hover:hover) {

.status-unchecked:not(.no-hover-effects):hover .checkbox-box {
                        border-color: color-mix(in srgb, var(--indent-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--indent-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

.status-unchecked:not(.no-hover-effects):active .checkbox-box {
            border-color: var(--indent-pressed-border-color);
            background-color: var(--indent-pressed-background-color);
}

.status-unchecked:not(.no-hover-effects):focus-visible .checkbox-box {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

.status-unchecked:not(.no-hover-effects):disabled .checkbox-box {
            border-color: var(--indent-disabled-border-color);
            background-color: var(--indent-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-indent-disabled-color) !important;
}

.status-unchecked.disabled:not(.no-hover-effects) .checkbox-box {
            border-color: var(--indent-disabled-border-color);
            background-color: var(--indent-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-indent-disabled-color) !important;
}

.status-unchecked:not(.no-hover-effects):disabled {
            cursor: not-allowed;
}

.status-unchecked.disabled:not(.no-hover-effects) {
            cursor: not-allowed;
}

.status-unchecked:not(.no-hover-effects):not(.disabled) .checkbox-box,.status-unchecked:not(.no-hover-effects):not(.disabled):hover .checkbox-box {
    border-color: var(--element-symbol-color);
  }

.status-unchecked.no-hover-effects .checkbox-box {
            border-color: var(--indent-enabled-border-color);
            background-color: var(--indent-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--indent-enabled-border-color);
            --base-background-color: var(--indent-enabled-background-color);
}

.status-checked.no-hover-effects .checkbox-box {
            border-color: var(--selected-enabled-border-color);
            background-color: var(--selected-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--selected-enabled-border-color);
            --base-background-color: var(--selected-enabled-background-color);
}

.status-mixed.no-hover-effects .checkbox-box {
            border-color: var(--amplified-enabled-border-color);
            background-color: var(--amplified-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--amplified-enabled-border-color);
            --base-background-color: var(--amplified-enabled-background-color);
}

.status-checked:not(.no-hover-effects) {
            cursor: pointer;
}

.status-checked:not(.no-hover-effects):focus {
            outline: none;
}

.status-checked:not(.no-hover-effects) .checkbox-box {
            border-color: var(--selected-enabled-border-color);
            background-color: var(--selected-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--selected-enabled-border-color);
            --base-background-color: var(--selected-enabled-background-color);
}

.status-checked.activated:not(.no-hover-effects) .checkbox-box {
            border-color: var(--selected-activated-border-color);
            background-color: var(--selected-activated-background-color);
            --base-border-color: var(--selected-activated-border-color);
            --base-background-color: var(--selected-activated-background-color);
}

@media (hover:hover) {

.status-checked:not(.no-hover-effects):hover .checkbox-box {
                        border-color: color-mix(in srgb, var(--selected-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--selected-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

.status-checked:not(.no-hover-effects):active .checkbox-box {
            border-color: var(--selected-pressed-border-color);
            background-color: var(--selected-pressed-background-color);
}

.status-checked:not(.no-hover-effects):focus-visible .checkbox-box {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

.status-checked:not(.no-hover-effects):disabled .checkbox-box {
            border-color: var(--selected-disabled-border-color);
            background-color: var(--selected-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-selected-disabled-color) !important;
}

.status-checked.disabled:not(.no-hover-effects) .checkbox-box {
            border-color: var(--selected-disabled-border-color);
            background-color: var(--selected-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-selected-disabled-color) !important;
}

.status-checked:not(.no-hover-effects):disabled {
            cursor: not-allowed;
}

.status-checked.disabled:not(.no-hover-effects) {
            cursor: not-allowed;
}

.status-mixed:not(.no-hover-effects) {
            cursor: pointer;
}

.status-mixed:not(.no-hover-effects):focus {
            outline: none;
}

.status-mixed:not(.no-hover-effects) .checkbox-box {
            border-color: var(--amplified-enabled-border-color);
            background-color: var(--amplified-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            cursor: pointer;
            --base-border-color: var(--amplified-enabled-border-color);
            --base-background-color: var(--amplified-enabled-background-color);
}

.status-mixed.activated:not(.no-hover-effects) .checkbox-box {
            border-color: var(--amplified-activated-border-color);
            background-color: var(--amplified-activated-background-color);
            --base-border-color: var(--amplified-activated-border-color);
            --base-background-color: var(--amplified-activated-background-color);
}

@media (hover:hover) {

.status-mixed:not(.no-hover-effects):hover .checkbox-box {
                        border-color: color-mix(in srgb, var(--amplified-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
                        background-color: color-mix(in srgb, var(--amplified-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
            }
}

.status-mixed:not(.no-hover-effects):active .checkbox-box {
            border-color: var(--amplified-pressed-border-color);
            background-color: var(--amplified-pressed-background-color);
}

.status-mixed:not(.no-hover-effects):focus-visible .checkbox-box {
            outline-color: var(--border-focus-color);
            outline-width: var(--global-size-spacing-border-weight-focusframe);
            outline-style: solid;
            border-color: var(--container-global-color);
            z-index: 1;
}

.status-mixed:not(.no-hover-effects):disabled .checkbox-box {
            border-color: var(--amplified-disabled-border-color);
            background-color: var(--amplified-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-amplified-disabled-color) !important;
}

.status-mixed.disabled:not(.no-hover-effects) .checkbox-box {
            border-color: var(--amplified-disabled-border-color);
            background-color: var(--amplified-disabled-background-color);
            cursor: not-allowed;
            color: var(--on-amplified-disabled-color) !important;
}

.status-mixed:not(.no-hover-effects):disabled {
            cursor: not-allowed;
}

.status-mixed.disabled:not(.no-hover-effects) {
            cursor: not-allowed;
}

.checkbox-box {
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: var(--ui-components-checkbox-visual-target-size);
  height: var(--ui-components-checkbox-visual-target-size);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-components-checkbox-border-radius);
  border: 1px solid transparent;
  background: transparent;
}

.status-mixed:not(.disabled) .checkbox-box,.status-mixed:not(.disabled):hover .checkbox-box,.status-mixed:not(.disabled):active .checkbox-box {
    border-color: var(--instrument-enhanced-secondary-color);
  }

:is(.status-unchecked.no-hover-effects .checkbox-box) {
            border-color: var(--indent-enabled-border-color);
            background-color: var(--indent-enabled-background-color);
            border-width: 1px;
            border-style: solid;
            --base-border-color: var(--indent-enabled-border-color);
            --base-background-color: var(--indent-enabled-background-color);
}

.status-unchecked.no-hover-effects .checkbox-box {
    border-color: var(--element-symbol-color);
  }

.status-unchecked.state-enabled:not(.disabled):not(
    .no-hover-effects
  ):focus-visible
  .checkbox-box {
  border-color: transparent;
}

@keyframes checkbox-loading-spin {
  to {
    transform: rotate(360deg);
  }
}
`;
export {
  componentStyle as default
};
//# sourceMappingURL=checkbox.css.js.map
