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

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

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

  .select_none {
    -webkit-user-select: none;
    user-select: none
    }
    .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)
        }
    .\[\&\[data-state\=open\]\]\:border_brand\.500[data-state=open] {
      border-color: var(--colors-brand-500)
        }
    .\[\&\[data-state\=open\]\]\:shadow_0_0_0_3px_rgba\(59\,_130\,_246\,_0\.1\)[data-state=open] {
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1)
        }

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

  .min-h_12 {
    min-height: var(--sizes-12)
    }

  .fs_lg {
    font-size: var(--font-sizes-lg)
    }

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

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

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

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

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

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

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

  .border_1px_solid {
    border: 1px solid
    }

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

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

  .z_999 {
    z-index: 999
    }

  .min-w_320px {
    min-width: 320px
    }

  .max-h_300px {
    max-height: 300px
    }

  .overflow_hidden {
    overflow: hidden
    }

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

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

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

  .cursor_pointer {
    cursor: pointer
    }

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

  .ring_none {
    outline: var(--borders-none)
    }
    .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)
        }

  .fs_xl {
    font-size: var(--font-sizes-xl)
    }

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

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

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

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

  .leading_relaxed {
    line-height: var(--line-heights-relaxed)
    }

  .pos_popper {
    position: popper
    }

  .items_center {
    align-items: center
    }

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

  .flex_row {
    flex-direction: row
    }

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

  .d_flex {
    display: flex
    }

  .flex_column {
    flex-direction: column
    }

  .items_start {
    align-items: start
    }

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

  .flex_1 {
    flex: 1 1 0%
    }
}