@roadtrip/css/styles/components/_segmented-button.css

CSS framework for Roadtrip Design System

/*
 * Segmented Button
 *
 * Index
 * - Segmented button bar
 * - Active state
 *
 */


.segmented-button-bar {
  display: flex;
  background-color: var(--road-surface);
  outline: 1px solid var(--road-outline-weak);
  border-radius: 12px;
  padding: var(--road-spacing-02);
}

.segmented-button-bar > .btn{
  flex: 1;
  font-size: var(--road-button-medium);
  border-left: 0;
  border-radius: 8px;
  margin-right: var(--road-spacing-02);
  margin-bottom: 0;
  border: 0;
  color: var(--road-on-surface-weak);
}

.segmented-button-bar > .btn.btn-sm{
  height: 2.5rem;
  }

.segmented-button-bar > .btn.btn-md{
height: 2.75rem;
}

.segmented-button-bar > .btn:hover{
  color: var(--road-on-surface);
  background-color: var(--road-surface-inverse);
}

.segmented-button-bar > .btn:last-child{
  margin-right: 0;
}

.segmented-button-bar > .btn-sm{
  font-size: var(--road-button-small);
}

.segmented-button-bar > .btn-sm svg{
  margin-right: var(--road-spacing-03);
}

.btn-outline-primary.active{
  background-color: var(--road-button-tertiary-variant);
  color: var(--road-button-primary);
  fill: var(--road-button-primary);
}