.#{$segmented} {
  --segmented-color: var(--text-regular);
  --segmented-bg-color: var(--bg-light);
  --segmented-padding: size(2px);
  --segmented-item-selected-color: var(--text-inverse);
  --segmented-item-selected-bg-color: var(--primary);
  --segmented-item-selected-disabled-bg-color: var(--primary-light-5);
  --segmented-item-hover-color: var(--text-primary);
  --segmented-item-hover-bg-color: var(--bg-hover);
  --segmented-item-active-bg-color: var(--bg-hover);
  --segmented-item-disabled-color: var(--text-light);
  --segmented-border-radius-base: size(4px);
  align-items: stretch;
  background: var(--segmented-bg-color);
  border-radius: var(--segmented-border-radius-base);
  box-sizing: border-box;
  color: var(--segmented-color);
  display: inline-flex;
  font-size: var(--font-md);
  min-height: size(32px);
  padding: var(--segmented-padding);
  .segmented-group {
    align-items: stretch;
    display: flex;
    position: relative;
    width: 100%;
  }
  .segmented-item-selected {
    background: var(--segmented-item-selected-bg-color);
    border-radius: calc(var(--segmented-border-radius-base) - 2px);
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: size(10px);
    &.is-disabled {
      background: var(--segmented-item-selected-disabled-bg-color)
    }
    &.is-focus-visible:before {
      border-radius: inherit;
      content: "";
      inset: 0;
      outline: 2px solid var(--segmented-item-selected-bg-color);
      outline-offset: 1px;
      position: absolute
    }
  }
  .segmented-item {
    align-items: center;
    border-radius: calc(var(--segmented-border-radius-base) - 2px);
    cursor: pointer;
    display: flex;
    flex: 1;
    padding: 0 size(11px);
    &:not(.is-disabled):not(.is-selected):hover {
      background: var(--segmented-item-hover-bg-color);
      color: var(--segmented-item-hover-color)
    }
    &:not(.is-disabled):not(.is-selected):active {
      background: var(--segmented-item-active-bg-color)
    }
    &.is-selected,
    &.is-selected.is-disabled {
      color: var(--segmented-item-selected-color)
    }
    &.is-disabled {
      color: var(--segmented-item-disabled-color);
      cursor: not-allowed
    }
  }
  .segmented-item-input {
    height: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 0
  }
  .segmented-item-label {
    flex: 1;
    line-height: normal;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    transition: color .3s;
    white-space: nowrap;
    z-index: 1
  }
  &.is-block {
    display: flex;
    .segmented-item {
      min-width: 0
    }
  }
  &.lg {
    border-radius: var(--segmented-border-radius-base);
    font-size: var(--font-lg);
    min-height: size(40px);
    .segmented-item,
    .segmented-item-selected {
      border-radius: calc(var(--segmented-border-radius-base) - 2px)
    }
    .segmented-item {
      padding: 0 size(11px)
    }
  }
  &.sm {
    border-radius: calc(var(--segmented-border-radius-base) - 1px);
    font-size: var(--font-md);
    min-height: size(24px);
    .segmented-item,
    .segmented-item-selected {
      border-radius: calc(var(--segmented-border-radius-base) - 3px)
    }
    .segmented-item {
      padding: 0 size(7px)
    }
  }
}