.components-view {
  container-type: inline-size;
  container-name: kitchen-sink;
  overflow: auto;
  height: 100%;
  background: var(--aura-surface) !important;
}

.components-view .flex {
  display: flex;
}

.components-view .flex-col {
  flex-direction: column;
}

.components-view .flex-wrap {
  flex-wrap: wrap;
}

.components-view .gap-s {
  gap: var(--vaadin-gap-s);
}

.components-view .justify-center {
  align-items: center;
  justify-content: center;
}

.components-view .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-flow: dense;
  --vaadin-field-default-width: 100%;
  align-items: stretch;
  gap: var(--vaadin-gap-s);
  margin: var(--vaadin-padding-l);
  margin-top: 0;
}

.components-view .component {
  display: flex;
  height: 200px;
  align-items: center;
  justify-content: center;
  border-radius: var(--vaadin-radius-m);
  border: 1px solid var(--vaadin-border-color-subtle);
  padding: var(--vaadin-padding-l);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: var(--aura-surface);
  --aura-surface-level: 3;
  background-clip: padding-box;
}

.components-view .grid .tall {
  height: 100%;
  min-height: 400px;
  grid-row: auto / span 2;
}

@container kitchen-sink (min-width: 400px) {
  .components-view .grid .wide,
  .components-view .grid .widest {
    grid-column: auto / span 2;
  }
}

@container kitchen-sink (min-width: 600px) {
  .components-view .grid .widest {
    grid-column: auto / span 3;
  }
}

.components-view .component.no-padding {
  padding: 0;
}

.components-view .component.no-padding vaadin-grid {
}

.components-view vaadin-chart {
  --vaadin-charts-background: transparent;
}

.components-view vaadin-date-picker {
  --vaadin-field-default-width: 8em;
}

.components-view vaadin-time-picker {
  --vaadin-field-default-width: 6em;
}