soroban-abacus-flashcards/apps/web/styled-system/chunks/src__components__ConfigurationFormWithoutGenerate.css

@layer utilities {
  .fs_2xl {
    font-size: var(--font-sizes-2xl)
    }

  .font_bold {
    font-weight: var(--font-weights-bold)
    }

  .bg_gray\.100 {
    background: var(--colors-gray-100)
    }

  .p_1 {
    padding: var(--spacing-1)
    }
    .hover\:text_gray\.900:is(:hover, [data-hover]) {
      color: var(--colors-gray-900)
        }
    .\[\&\[data-state\=active\]\]\:bg_white[data-state=active] {
      background: var(--colors-white)
        }
    .\[\&\[data-state\=active\]\]\:text_brand\.600[data-state=active] {
      color: var(--colors-brand-600)
        }
    .\[\&\[data-state\=active\]\]\:shadow_card[data-state=active] {
      box-shadow: var(--shadows-card)
        }

  .mr_2 {
    margin-right: var(--spacing-2)
    }

  .mt_6 {
    margin-top: var(--spacing-6)
    }

  .p_4 {
    padding: var(--spacing-4)
    }

  .bg_blue\.50 {
    background: var(--colors-blue-50)
    }

  .border_blue\.200 {
    border-color: var(--colors-blue-200)
    }

  .fs_md {
    font-size: var(--font-sizes-md)
    }

  .text_blue\.800 {
    color: var(--colors-blue-800)
    }

  .text_blue\.700 {
    color: var(--colors-blue-700)
    }

  .font_semibold {
    font-weight: var(--font-weights-semibold)
    }

  .bg_gray\.300 {
    background: var(--colors-gray-300)
    }
    .hover\:bg_brand\.700:is(:hover, [data-hover]) {
      background: var(--colors-brand-700)
        }
    .hover\:bg_gray\.400:is(:hover, [data-hover]) {
      background: var(--colors-gray-400)
        }

  .w_11 {
    width: var(--sizes-11)
    }

  .h_6 {
    height: var(--sizes-6)
    }

  .transform_translateX\(20px\) {
    transform: translateX(20px)
    }

  .transform_translateX\(0px\) {
    transform: translateX(0px)
    }

  .transition_transform_0\.2s {
    transition: transform 0.2s
    }

  .will-change_transform {
    will-change: transform
    }
    .hover\:border_brand\.400:is(:hover, [data-hover]) {
      border-color: var(--colors-brand-400)
        }
    .\[\&\[data-state\=checked\]\]\:border_brand\.600[data-state=checked] {
      border-color: var(--colors-brand-600)
        }

  .justify_center {
    justify-content: center
    }
    .after\:content_\"\"::after {
      content: ""
        }
    .after\:d_block::after {
      display: block
        }
    .after\:w_2::after {
      width: var(--sizes-2)
        }
    .after\:h_2::after {
      height: var(--sizes-2)
        }
    .after\:rounded_full::after {
      border-radius: var(--radii-full)
        }
    .after\:bg_brand\.600::after {
      background: var(--colors-brand-600)
        }

  .text_gray\.900 {
    color: var(--colors-gray-900)
    }

  .fs_xs {
    font-size: var(--font-sizes-xs)
    }

  .rounded_xl {
    border-radius: var(--radii-xl)
    }

  .shadow_modal {
    box-shadow: var(--shadows-modal)
    }

  .border_gray\.200 {
    border-color: var(--colors-gray-200)
    }

  .p_2 {
    padding: var(--spacing-2)
    }

  .z_50 {
    z-index: 50
    }

  .px_3 {
    padding-inline: var(--spacing-3)
    }

  .py_2 {
    padding-block: var(--spacing-2)
    }
    .hover\:bg_brand\.50:is(:hover, [data-hover]) {
      background: var(--colors-brand-50)
        }
    .\[\&\[data-state\=checked\]\]\:bg_brand\.100[data-state=checked] {
      background: var(--colors-brand-100)
        }
    .\[\&\[data-state\=checked\]\]\:text_brand\.800[data-state=checked] {
      color: var(--colors-brand-800)
        }

  .font_medium {
    font-weight: var(--font-weights-medium)
    }

  .text_brand\.600 {
    color: var(--colors-brand-600)
    }

  .text_gray\.600 {
    color: var(--colors-gray-600)
    }

  .select_none {
    -webkit-user-select: none;
    user-select: none
    }

  .touch_none {
    touch-action: none
    }

  .bg_gray\.200 {
    background: var(--colors-gray-200)
    }

  .pos_relative {
    position: relative
    }

  .grow_1 {
    flex-grow: 1
    }

  .h_2 {
    height: var(--sizes-2)
    }

  .pos_absolute {
    position: absolute
    }

  .bg_brand\.600 {
    background: var(--colors-brand-600)
    }

  .h_full {
    height: var(--sizes-full)
    }

  .d_block {
    display: block
    }

  .w_5 {
    width: var(--sizes-5)
    }

  .h_5 {
    height: var(--sizes-5)
    }

  .shadow_card {
    box-shadow: var(--shadows-card)
    }

  .rounded_full {
    border-radius: var(--radii-full)
    }

  .border_2px_solid {
    border: 2px solid
    }

  .border_brand\.600 {
    border-color: var(--colors-brand-600)
    }

  .cursor_pointer {
    cursor: pointer
    }
    .hover\:transform_scale\(1\.1\):is(:hover, [data-hover]) {
      transform: scale(1.1)
        }

  .w_full {
    width: var(--sizes-full)
    }

  .px_4 {
    padding-inline: var(--spacing-4)
    }

  .py_3 {
    padding-block: var(--spacing-3)
    }

  .bg_white {
    background: var(--colors-white)
    }

  .border_1px_solid {
    border: 1px solid
    }

  .border_gray\.300 {
    border-color: var(--colors-gray-300)
    }

  .rounded_lg {
    border-radius: var(--radii-lg)
    }

  .fs_sm {
    font-size: var(--font-sizes-sm)
    }

  .transition_all {
    transition-property: var(--transition-prop, all);
    transition-timing-function: var(--transition-easing, cubic-bezier(0.4, 0, 0.2, 1));
    transition-duration: var(--transition-duration, 150ms)
    }
    .hover\:border_gray\.400:is(:hover, [data-hover]) {
      border-color: var(--colors-gray-400)
        }
    .focus\:ring_none:is(:focus, [data-focus]) {
      outline: var(--borders-none)
        }
    .focus\:border_brand\.500:is(:focus, [data-focus]) {
      border-color: var(--colors-brand-500)
        }
    .focus\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\):is(:focus, [data-focus]) {
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
        }

  .gap_6 {
    gap: var(--spacing-6)
    }

  .gap_2 {
    gap: var(--spacing-2)
    }

  .gap_1 {
    gap: var(--spacing-1)
    }

  .flex_1 {
    flex: 1 1 0%
    }

  .flex_column {
    flex-direction: column
    }

  .d_grid {
    display: grid
    }

  .grid-cols_repeat\(2\,_minmax\(0\,_1fr\)\) {
    grid-template-columns: repeat(2, minmax(0, 1fr))
    }

  .gap_4 {
    gap: var(--spacing-4)
    }

  .items_start {
    align-items: start
    }

  .gap_3 {
    gap: var(--spacing-3)
    }

  .d_flex {
    display: flex
    }

  .items_center {
    align-items: center
    }

  .justify_space-between {
    justify-content: space-between
    }

  .gap_10px {
    gap: 10px
    }

  .flex_row {
    flex-direction: row
    }
}