@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../common/var.scss" as *;

@include b(segmented) {
  height: getCssVar("size", "medium");
  display: inline-flex;
  background-color: getCssVar("color", "fill-2");
  position: relative;
  padding: 4px;
  border: none;
  border-radius: getCssVar("radius", "medium");
  @include m(block) {
    display: flex;
    width: 100%;
  }
  @include e(item) {
    height: 100%;
    flex: 1;
    padding: 0 12px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-wrap: nowrap;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    z-index: 2;

    @include when(selected) {
      color: #fff;
    }
    @include when(disabled) {
      cursor: not-allowed;
      color: getCssVar("color", "text-3");
      user-select: none;
    }
    &.is-selected.is-disabled {
      color: #fff;
      background-color: getCssVar("color", "primary-4");
      border-radius: calc(getCssVar("radius", "medium") - 1px);
    }
  }

  @include e(label) {
    z-index: 1;
  }

  @include m(selected) {
    position: absolute;
    height: calc(100% - 8px);
    background-color: getCssVar("color", "primary-6");
    color: #fff;
    border-radius: calc(getCssVar("radius", "medium") - 1px);
    transition: all 0.3s;
    pointer-events: none;
    position: absolute;
    top: 4px;
    bottom: 4px;
    z-index: 1;
    pointer-events: none;
    transition:
      left 0.2s getCssVar("bezier", "1"),
      width 0.2s getCssVar("bezier", "1");
  }

  @each $size in $size-list {
    @include m(#{$size}) {
      height: getCssVar("size", #{$size});
    }
  }
}