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

@layer utilities {

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

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

  .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)
    }

  .d_block {
    display: block
    }

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

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

  .will-change_transform {
    will-change: transform
    }

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

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

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

  .border_2px_solid {
    border: 2px solid
    }

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

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

  .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_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)
        }

  .mt_0\.5 {
    margin-top: var(--spacing-0\.5)
    }

  .items_center {
    align-items: center
    }

  .justify_center {
    justify-content: center
    }

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

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

  .pos_relative {
    position: relative
    }
    .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)
        }

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

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

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

  .cursor_pointer {
    cursor: pointer
    }

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

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

  .leading_tight {
    line-height: var(--line-heights-tight)
    }

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

  .flex_column {
    flex-direction: column
    }

  .gap_0\.5 {
    gap: var(--spacing-0\.5)
    }

  .flex_1 {
    flex: 1 1 0%
    }

  .d_grid {
    display: grid
    }

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

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

  .d_flex {
    display: flex
    }

  .items_start {
    align-items: start
    }

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

  .flex_row {
    flex-direction: row
    }
}