@layer seed-components {
  .seed-select-box-checkmark__root {
    box-sizing: border-box;
    width: var(--seed-dimension-x5);
    height: var(--seed-dimension-x5);
    flex: none;
    position: relative;
  }

  .seed-select-box-checkmark__icon {
    text-align: center;
    overflow: initial;
    width: 15px;
    height: 15px;
    color: var(--seed-color-fg-placeholder);
    transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
    margin: auto;
    display: block;
    position: absolute;
    inset: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
      color: var(--seed-color-fg-neutral-subtle);
    }
  }

  @media not all and (hover: hover) and (pointer: fine) {
    .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
      color: var(--seed-color-fg-neutral-subtle);
    }
  }

  .seed-select-box-checkmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
    color: var(--seed-color-fg-neutral);
  }

  .seed-select-box-checkmark__icon:is(:disabled, [disabled], [data-disabled]) {
    color: var(--seed-color-fg-disabled);
  }
}