.product-form__input {
  .options-wrapper {
    display: flex;
    gap: 16px;

    .product-option-button {
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      height: 48px;
      padding: 4px 12px;
      font-size: 14px;
      border: 1px solid var(--color-accent);
      border-radius: 4px;

      &:has(input:checked) {
        color: var(--bg-body, #fff);
        background-color: var(--color-accent);
      }

      &:has(input:not(:checked):hover) {
        background-color: rgba(var(--color-accent-rgb), 0.02);
      }

      &:has(input:focus-visible) {
        outline: 2px solid #015ecc;
      }

      &:has(input:disabled) {
        border: 1px solid var(--color-form-border);
        background: linear-gradient(
            to bottom right,
            transparent calc(50% - 1px),
            var(--color-form-border),
            transparent calc(50% + 1px)
          )
          no-repeat;
      }

      input[type="radio"] {
        all: unset;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .badge {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(8px, -50%);
      }
    }
  }
}