/* ==========================================================================
   OPTION CARDS
   Selection UI component for interactive tools and forms
   ========================================================================== */

@layer components {
  /* Option Cards Container */
  .option-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space-half);
    margin-top: var(--block-space-half);

    &--stack {
      flex-direction: column;
    }

    &--grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--option-card-min-width), 1fr));
    }
  }

  /* Option Card */
  .option-card {
    padding: var(--block-space) var(--inline-space-double);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--color-canvas);
    font-size: var(--text-subhead);
    line-height: var(--leading-normal);

    &:hover {
      border-color: var(--color-ink-lighter);
      background: var(--color-ink-lightest);
    }

    &--selected {
      border-color: var(--color-link);
      background: var(--color-selected-light);
      color: var(--color-ink);
      font-weight: 500;

      &:hover {
        background: var(--color-selected);
      }
    }
  }
}