rsuite/SegmentedControl/styles/index.css

A suite of react components

:root{
  --rs-segmented-control-spacing:calc(var(--rs-spacing) * 1);
  --rs-segmented-control-border-radius:var(--rs-radius-md);
  --rs-segmented-control-border-width:1px;
  --rs-segmented-control-padding:calc(var(--rs-spacing) * 0.5);
  --rs-segmented-control-height:36px;
  --rs-segmented-control-height-xs:24px;
  --rs-segmented-control-height-sm:30px;
  --rs-segmented-control-height-lg:42px;
  --rs-segmented-control-height-xl:48px;
  --rs-segmented-control-item-padding-y:calc(var(--rs-spacing) * 1);
  --rs-segmented-control-item-padding-y-xs:calc(var(--rs-spacing) * 0.5);
  --rs-segmented-control-item-padding-y-sm:calc(var(--rs-spacing) * 0.75);
  --rs-segmented-control-item-padding-y-lg:calc(var(--rs-spacing) * 1.25);
  --rs-segmented-control-item-padding-y-xl:calc(var(--rs-spacing) * 1.5);
  --rs-segmented-control-item-padding-x:calc(var(--rs-spacing) * 2);
  --rs-segmented-control-item-padding-x-xs:calc(var(--rs-spacing) * 1.5);
  --rs-segmented-control-item-padding-x-sm:calc(var(--rs-spacing) * 1.75);
  --rs-segmented-control-item-padding-x-lg:calc(var(--rs-spacing) * 2.25);
  --rs-segmented-control-item-padding-x-xl:calc(var(--rs-spacing) * 2.5);
  --rs-segmented-control-font-size:var(--rs-font-size-sm);
  --rs-segmented-control-font-size-xs:var(--rs-font-size-extra-small);
  --rs-segmented-control-font-size-sm:var(--rs-font-size-sm);
  --rs-segmented-control-font-size-lg:var(--rs-font-size-base);
  --rs-segmented-control-font-size-xl:var(--rs-font-size-large);
  --rs-segmented-control-indicator-transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --rs-segmented-control-indicator-border-radius:calc(var(--rs-radius-md) - 2px);
  --rs-segmented-control-indicator-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --rs-segmented-control-underline-height:2px;
  --rs-segmented-control-pill-indicator-height:calc(var(--rs-segmented-control-height) - 8px);
  --rs-segmented-control-pill-indicator-border-radius:var(--rs-radius-md);
  --rs-segmented-control-pill-indicator-shadow:var(--rs-shadow-sm);
}

.rs-segmented-control{
  display:inline-flex;
  position:relative;
  align-items:center;
  height:var(--rs-segmented-control-height);
  border-style:solid;
  border-width:var(--rs-segmented-control-border-width);
  border-color:var(--rs-segmented-control-border-color);
  border-radius:var(--rs-segmented-control-border-radius);
  padding:var(--rs-segmented-control-padding);
  gap:var(--rs-segmented-control-spacing);
  background-color:var(--rs-segmented-control-bg);
  box-sizing:border-box;
  font-size:var(--rs-segmented-control-font-size);
}
.rs-segmented-control:where([data-size=xs]){
  --rs-segmented-control-height:var(--rs-segmented-control-height-xs);
  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-xs);
  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-xs);
  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-xs);
}
.rs-segmented-control:where([data-size=sm]){
  --rs-segmented-control-height:var(--rs-segmented-control-height-sm);
  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-sm);
  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-sm);
  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-sm);
}
.rs-segmented-control:where([data-size=lg]){
  --rs-segmented-control-height:var(--rs-segmented-control-height-lg);
  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-lg);
  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-lg);
  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-lg);
}
.rs-segmented-control:where([data-size=xl]){
  --rs-segmented-control-height:var(--rs-segmented-control-height-xl);
  --rs-segmented-control-item-padding-y:var(--rs-segmented-control-item-padding-y-xl);
  --rs-segmented-control-item-padding-x:var(--rs-segmented-control-item-padding-x-xl);
  --rs-segmented-control-font-size:var(--rs-segmented-control-font-size-xl);
}
.rs-segmented-control[data-block=true]{
  display:flex;
  width:100%;
}
.rs-segmented-control[data-block=true] .rs-segmented-control-item{
  flex:1 1 0%;
  min-width:0;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rs-segmented-control:empty{
  display:none;
}
.rs-segmented-control .rs-segmented-control-item{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding-inline:var(--rs-segmented-control-item-padding-x);
  padding-block:var(--rs-segmented-control-item-padding-y);
  border-radius:var(--rs-segmented-control-indicator-border-radius);
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  transition:color 0.2s ease;
  color:var(--rs-segmented-control-item-color);
}
.rs-segmented-control .rs-segmented-control-item[data-active]{
  color:var(--rs-segmented-control-item-active-color);
}
.rs-segmented-control .rs-segmented-control-item[data-disabled]{
  opacity:0.5;
  cursor:not-allowed;
}
.rs-segmented-control .rs-segmented-control-item .rs-segmented-control-radio{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
  margin:0;
  padding:0;
}
.rs-segmented-control .rs-segmented-control-item .rs-segmented-control-label{
  font-size:var(--rs-font-size-sm);
  line-height:var(--rs-line-height-sm);
  display:flex;
  align-items:center;
}
.rs-segmented-control .rs-segmented-control-indicator{
  position:absolute;
  z-index:0;
  transition:var(--rs-segmented-control-indicator-transition);
  box-shadow:var(--rs-segmented-control-indicator-shadow);
}
[data-theme=high-contrast] .rs-segmented-control .rs-segmented-control-indicator, .rs-theme-high-contrast .rs-segmented-control .rs-segmented-control-indicator{
  transition:none;
}
.rs-segmented-control:where([data-indicator=pill]) .rs-segmented-control-indicator{
  background-color:var(--rs-segmented-control-pill-indicator-bg);
  border-radius:var(--rs-segmented-control-pill-indicator-border-radius);
  box-shadow:var(--rs-segmented-control-pill-indicator-shadow);
  height:var(--rs-segmented-control-pill-indicator-height);
}
.rs-segmented-control:where([data-indicator=underline]){
  padding-block:0;
  padding-inline:var(--rs-segmented-control-border-radius);
  background-color:transparent;
}
.rs-segmented-control:where([data-indicator=underline]) .rs-segmented-control-item{
  padding-bottom:calc(var(--rs-segmented-control-item-padding-y) + var(--rs-segmented-control-underline-height));
  border-radius:0;
  position:relative;
  z-index:1;
}
.rs-segmented-control:where([data-indicator=underline]) .rs-segmented-control-indicator{
  bottom:-1px;
  height:var(--rs-segmented-control-underline-height);
  background-color:var(--rs-segmented-control-underline-color);
  border-radius:var(--rs-radius-none);
  box-shadow:none;
}