@import '../../style/themes/default';
@import '../../style/mixins';

@segment-prefix-cls: am-segment;

.@{segment-prefix-cls} {
  .display-box;
  background-color: @fill-base;
  border: @border-width-md solid @segmented-control-color;
  border-radius: @radius-md;
  overflow: hidden;
  box-sizing: border-box;
  min-height: @segmented-control-height;
  &-item {
    .box-flex(1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: @segmented-control-color;
    font-size: @font-size-base;
    border-right: @border-width-md solid @segmented-control-color;
    line-height: 1;
    transition: background 0.2s;
    position: relative;

    &:last-child {
      border-right: 0;
    }

    &-selected {
      background: @segmented-control-color;
      color: @color-text-base-inverse;
    }

    &-feedback {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0.1;
      transition: background 0.2s;
    }
  }
}