@ozen-ui/kit/__inner__/cjs/components/Stack/Stack.css

React component library

/* xs >= 0px */
/* s >= 640px */
/* m >= 1024px */
/* l >= 1280px */
.Stack {
  display: inline-flex;
  vertical-align: middle;
}
.Stack-Item {
    display: inline-block;
  }
.Stack_direction_row {
    flex-direction: row;
  }
.Stack_direction_column {
    flex-direction: column;
  }
.Stack_direction_rowReverse {
    flex-direction: row-reverse;
  }
.Stack_direction_columnReverse {
    flex-direction: column-reverse;
  }
.Stack_gap_0 {
    gap: 0;
  }
.Stack_gap_xs {
    gap: var(--space-xs);
  }
.Stack_gap_s {
    gap: var(--space-s);
  }
.Stack_gap_m {
    gap: var(--space-m);
  }
.Stack_gap_l {
    gap: var(--space-l);
  }
.Stack_gap_xl {
    gap: var(--space-xl);
  }
.Stack_gap_2xl {
    gap: var(--space-2xl);
  }
.Stack_gap_3xl {
    gap: var(--space-3xl);
  }
.Stack_gap_4xl {
    gap: var(--space-4xl);
  }
.Stack_gap_5xl {
    gap: var(--space-5xl);
  }
.Stack_gap_6xl {
    gap: var(--space-6xl);
  }
.Stack_gap_7xl {
    gap: var(--space-7xl);
  }
.Stack_gap_8xl {
    gap: var(--space-8xl);
  }
.Stack_wrap {
    flex-wrap: wrap;
  }
.Stack_fullWidth {
    inline-size: 100%;
  }
.Stack_align_center {
      align-items: center;
    }
.Stack_align_start {
      align-items: flex-start;
    }
.Stack_align_end {
      align-items: flex-end;
    }
.Stack_align_baseline {
      align-items: baseline;
    }
.Stack_justify_start {
      justify-content: flex-start;
    }
.Stack_justify_center {
      justify-content: center;
    }
.Stack_justify_end {
      justify-content: end;
    }
.Stack_justify_spaceBetween {
      justify-content: space-between;
    }
.Stack_justify_spaceAround {
      justify-content: space-around;
    }
@media (min-width: 0) {
      .Stack_direction_xs_row {
    flex-direction: row;
  }
      .Stack_direction_xs_column {
    flex-direction: column;
  }
      .Stack_direction_xs_rowReverse {
    flex-direction: row-reverse;
  }
      .Stack_direction_xs_columnReverse {
    flex-direction: column-reverse;
  }
      .Stack_gap_xs_0 {
    gap: 0;
  }
      .Stack_gap_xs_xs {
    gap: var(--space-xs);
  }
      .Stack_gap_xs_s {
    gap: var(--space-s);
  }
      .Stack_gap_xs_m {
    gap: var(--space-m);
  }
      .Stack_gap_xs_l {
    gap: var(--space-l);
  }
      .Stack_gap_xs_xl {
    gap: var(--space-xl);
  }
      .Stack_gap_xs_2xl {
    gap: var(--space-2xl);
  }
      .Stack_gap_xs_3xl {
    gap: var(--space-3xl);
  }
      .Stack_gap_xs_4xl {
    gap: var(--space-4xl);
  }
      .Stack_gap_xs_5xl {
    gap: var(--space-5xl);
  }
      .Stack_gap_xs_6xl {
    gap: var(--space-6xl);
  }
      .Stack_gap_xs_7xl {
    gap: var(--space-7xl);
  }
      .Stack_gap_xs_8xl {
    gap: var(--space-8xl);
  }
  }
@media (min-width: 640px) {
      .Stack_direction_s_row {
    flex-direction: row;
  }
      .Stack_direction_s_column {
    flex-direction: column;
  }
      .Stack_direction_s_rowReverse {
    flex-direction: row-reverse;
  }
      .Stack_direction_s_columnReverse {
    flex-direction: column-reverse;
  }
      .Stack_gap_s_0 {
    gap: 0;
  }
      .Stack_gap_s_xs {
    gap: var(--space-xs);
  }
      .Stack_gap_s_s {
    gap: var(--space-s);
  }
      .Stack_gap_s_m {
    gap: var(--space-m);
  }
      .Stack_gap_s_l {
    gap: var(--space-l);
  }
      .Stack_gap_s_xl {
    gap: var(--space-xl);
  }
      .Stack_gap_s_2xl {
    gap: var(--space-2xl);
  }
      .Stack_gap_s_3xl {
    gap: var(--space-3xl);
  }
      .Stack_gap_s_4xl {
    gap: var(--space-4xl);
  }
      .Stack_gap_s_5xl {
    gap: var(--space-5xl);
  }
      .Stack_gap_s_6xl {
    gap: var(--space-6xl);
  }
      .Stack_gap_s_7xl {
    gap: var(--space-7xl);
  }
      .Stack_gap_s_8xl {
    gap: var(--space-8xl);
  }
  }
@media (min-width: 1024px) {
      .Stack_direction_m_row {
    flex-direction: row;
  }
      .Stack_direction_m_column {
    flex-direction: column;
  }
      .Stack_direction_m_rowReverse {
    flex-direction: row-reverse;
  }
      .Stack_direction_m_columnReverse {
    flex-direction: column-reverse;
  }
      .Stack_gap_m_0 {
    gap: 0;
  }
      .Stack_gap_m_xs {
    gap: var(--space-xs);
  }
      .Stack_gap_m_s {
    gap: var(--space-s);
  }
      .Stack_gap_m_m {
    gap: var(--space-m);
  }
      .Stack_gap_m_l {
    gap: var(--space-l);
  }
      .Stack_gap_m_xl {
    gap: var(--space-xl);
  }
      .Stack_gap_m_2xl {
    gap: var(--space-2xl);
  }
      .Stack_gap_m_3xl {
    gap: var(--space-3xl);
  }
      .Stack_gap_m_4xl {
    gap: var(--space-4xl);
  }
      .Stack_gap_m_5xl {
    gap: var(--space-5xl);
  }
      .Stack_gap_m_6xl {
    gap: var(--space-6xl);
  }
      .Stack_gap_m_7xl {
    gap: var(--space-7xl);
  }
      .Stack_gap_m_8xl {
    gap: var(--space-8xl);
  }
  }
@media (min-width: 1280px) {
      .Stack_direction_l_row {
    flex-direction: row;
  }
      .Stack_direction_l_column {
    flex-direction: column;
  }
      .Stack_direction_l_rowReverse {
    flex-direction: row-reverse;
  }
      .Stack_direction_l_columnReverse {
    flex-direction: column-reverse;
  }
      .Stack_gap_l_0 {
    gap: 0;
  }
      .Stack_gap_l_xs {
    gap: var(--space-xs);
  }
      .Stack_gap_l_s {
    gap: var(--space-s);
  }
      .Stack_gap_l_m {
    gap: var(--space-m);
  }
      .Stack_gap_l_l {
    gap: var(--space-l);
  }
      .Stack_gap_l_xl {
    gap: var(--space-xl);
  }
      .Stack_gap_l_2xl {
    gap: var(--space-2xl);
  }
      .Stack_gap_l_3xl {
    gap: var(--space-3xl);
  }
      .Stack_gap_l_4xl {
    gap: var(--space-4xl);
  }
      .Stack_gap_l_5xl {
    gap: var(--space-5xl);
  }
      .Stack_gap_l_6xl {
    gap: var(--space-6xl);
  }
      .Stack_gap_l_7xl {
    gap: var(--space-7xl);
  }
      .Stack_gap_l_8xl {
    gap: var(--space-8xl);
  }
  }