.coffee-variant-selector {
  --background-color-default: var(--light-100);
  --background-color-selected: var(--light-200);
  --text-color-selected: var(--dark-800);
  --border-color-default: var(--dark-800);
  --border-color-selected: var(--dark-800);
  --button-border-width: 1px;
  --button-size: 55px;

  width: -moz-fit-content;

  width: fit-content;

  .radio-group {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .variant-options {
    display: flex;
    flex-wrap: wrap;
  }

  .option-value-label {
    align-items: center;
    background-color: var(--background-color-default);
    border: var(--button-border-width) solid var(--border-color-default);
    border-width: var(--button-border-width);
    cursor: pointer;
    display: flex;
    gap: var(--fixed-space-2);
    height: var(--button-size);
    justify-content: center;
    margin: 0;
    min-width: var(--button-size);
    opacity: 0.4;
    padding: var(--fixed-space-3);
    padding-inline: var(--fixed-space-6);

    &:last-child {
      border-bottom: none;
      border-left: none;

      &:has(.option-value-radio:checked) {
        border-left: 1px solid var(--text-color-selected);
      }
    }

    &:has(.option-value-radio:checked) {
      background-color: var(--background-color-selected);
      border-color: var(--border-color-selected);
      color: var(--text-color-selected);
      opacity: 1;
    }

    &:has(+ .option-value-label .option-value-radio:checked) {
      border-right-color: transparent;
    }

    &:has(.option-value-radio.unavailable) {
      background: var(--light-100);
      border-color: var(--dark-800-o50);
      color: var(--dark-800-o50);
    }

    &:has(.option-value-radio.unavailable:checked) {
      background: var(--background-color-selected);
      border-color: var(--border-color-selected);
      color: var(--text-color-selected);
    }

    &:has(.option-value-radio:focus-visible) {
      outline: 1px dashed var(--button-primary-focus-outline);
      outline-offset: 2px;
    }
  }

  .option-value-label:not(:last-child) {
    border-bottom: none;
  }

  .option-value-radio:focus-visible {
    outline: none;
  }

  @media (hover: hover) {
    .option-value-label:hover:not(:has(.option-value-radio:checked)) {
      background-color: var(--background-color-selected);
    }
  }

  @media (max-width: 749px) {
    width: 100%;

    .option-value-label {
      flex: 1 1 50%;
      font-size: var(--font-size-b-small);
    }
  }
}