:root {
  --hgt-article: 27vh;
  --container-gap: 16px ;
}

.segmented-buttons-container {
  position: relative;
  width: 100%;
  opacity: 1;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.segmented-buttons-container, .segmented-buttons-container-diretional {
  gap: var(--container-gap);
}
.segmented-buttons-container-diretional:where(.segmented-buttons-container-diretional > section, .segmented-buttons-container-diretional > section + nav) {
  padding-top: 0;
}
.segmented-buttons-container.navigation {
  padding-top: 0;
}
.segmented-buttons-container.navigation nav {
  position: initial;
}
.segmented-buttons-container.navigation article {
  opacity: 1;
  position: fixed;
  background: var(--color-secondary);
  width: 100%;
}
.segmented-buttons-container.loading {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.segmented-buttons-container > nav {
  width: 100%;
  height: 40px;
  border-radius: var(--shape-large);
  border: 1px solid var(--color-outline);
  overflow: hidden;
  column-gap: 0;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: var(--color-outline);
}
.segmented-buttons-container > nav div {
  display: flex;
  justify-content: center;
}
.segmented-buttons-container > nav div:first-child {
  justify-content: start;
}
.segmented-buttons-container > nav div:last-child {
  justify-content: end;
}
.segmented-buttons-container > nav div:first-child button, .segmented-buttons-container > nav div:last-child button {
  width: calc(100% - 0.5px);
}
.segmented-buttons-container > nav div button {
  width: calc(100% - 1px);
  padding: 0 12px;
}
.segmented-buttons-container > nav div button.active {
  background-color: var(--color-secondary-container);
}
.segmented-buttons-container > nav div button.active:where(.low, .basic):not(:where([disabled], .point-events--none)) {
  color: var(--color-on-secondary-container);
  fill: var(--color-on-secondary-container);
}
.segmented-buttons-container > nav div button.active:where(.low, .basic):not(:where([disabled], .point-events--none)) svg {
  fill: var(--color-on-secondary-container);
}
.segmented-buttons-container > nav div button.active:where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active):before, .segmented-buttons-container > nav div button.active:where(.low, .basic):not(:where([disabled], .point-events--none)):where(:hover, :active) .container-svg:before {
  background-color: var(--color-secondary-container);
}
.segmented-buttons-container article {
  overflow: auto;
  min-height: var(--hgt-hor-article);
  height: var(--hgt-hor-article);
  max-height: var(--hgt-hor-article);
  padding: 0 16px;
}

@media screen and (min-height: 640px) {
  .segmented-buttons-container article {
    min-height: var(--hgt-article);
    height: var(--hgt-article);
    max-height: var(--hgt-article);
  }
}
@media screen and (min-width: 959px) {
  :root {
    --container-gap: 24px ;
  }
}

/*# sourceMappingURL=segmented-buttons.css.map */