@import 'src/style/function';

.segmented-picker {
  .segmented-picker-background {
    .background(var(--fill-tertiary));
    .flex-space-between;
    // 防止 segment 阴影外溢
    overflow: hidden;

    .segment {
      position: relative;
      .flex-diagonal-center;
      color: var(--label-primary);
      cursor: pointer;
      // 除了第一个元素，都通过伪类加上这个左边框
      &:not(:nth-of-type(1))::after {
        // 对应元素必须是 absolute 或 relative，伪类定位才会生效，不然一直向父级元素查找，直到有定位为止
        .absolute-position(auto, 0);
        .size(auto, 60%);
        content: '';
        background-color: #0A84FF;
        // outset 将会失效
        border-right: 1px inset var(--separator-color);
      }

      &:hover, &.selected {
        .background(var(--segment-color));
        box-shadow: var(--button-shadow-primary);

        &::after {
          border: none;
        }
      }
    }
  }
}