st-grid-select {
  --st-form-button-padding-y: 4px;
  --st-form-button-padding-x: 10px;
  --st-form-button-color: #999999;
  --st-form-button-background-color: #dcdcdc;
  --st-form-button-hover-background: #dcdcdc;
  --st-form-button-active-background: #c2c2c2;
  box-sizing: border-box; }
  st-grid-select * {
    box-sizing: border-box; }
  st-grid-select .st-grid-select {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; }
    st-grid-select .st-grid-select.st-border {
      border: var(--st-grid-select-border, 2px solid #dcdcdc);
      padding: var(--st-grid-select-padding, 10px 10px);
      border-radius: var(--st-grid-select-border-radius, 4px); }
    st-grid-select .st-grid-select > .st-grid-select-item {
      flex: 1 1 var(--st-grid-select-item-width, 25%);
      padding: var(--st-grid-select-item-padding, 10px); }
      st-grid-select .st-grid-select > .st-grid-select-item > * {
        display: inline-block;
        width: 100%; }
      st-grid-select .st-grid-select > .st-grid-select-item.st-active, st-grid-select .st-grid-select > .st-grid-select-item.st-active:hover {
        color: var(--st-grid-select-selected-color, #fff);
        background-color: var(--st-grid-select-selected-background-color, #3277b3); }

@media (max-width: var(--st-grid-select-mobile-breakpoint, 400px)) {
  st-grid-select .st-grid-select {
    --st-grid-select-item-width: 100%; }
    st-grid-select .st-grid-select > .st-grid-select-item {
      flex: 1; } }