@layer components {
  /* Radio Select Component
     ========================================================================== */

  .category-item {
    flex: 0 0 22%;
  }

  .category-selector {
    position: absolute;
    transform: scale(0);
  }

  .category-selector + label,
  .category-selector + button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius);
    background-color: var(--color-bg);
    font: inherit;
  }

  .category-selector:checked + label {
    background-color: var(--color-blue-fill);
    color: var(--color-always-white);
  }

  .category-selector:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .category-selector:disabled + button {
    opacity: 0.5;
  }
}