@import "./variables";

.#{$component-prefix}sidebar-tab {
  position: relative;
  box-sizing: border-box;
  display: block;
  padding: $sidebar-tab-padding;
  overflow: hidden;
  font-size: $sidebar-tab-font-size;
  line-height: $sidebar-tab-line-height;
  color: $sidebar-tab-color;
  cursor: pointer;
  user-select: none;
  background: $sidebar-tab-background-color;

  &:active {
    background: $sidebar-tab-active-background-color;
  }

  &__children {
    // https://github.com/youzan/vant/issues/7455
    word-break: break-all;
  }

  &--active {
    font-weight: $sidebar-tab-active-font-weight;
    color: $sidebar-tab-active-color;

    &,
    &:active {
      background: $sidebar-tab-active-active-background-color;
    }

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      width: $sidebar-tab-active-border-width;
      height: $sidebar-tab-active-border-height;
      content: '';
      background: $sidebar-tab-active-border-color;
      transform: translateY(-50%);
    }
  }

  &--disabled {
    color: $sidebar-tab-disabled-color;
    cursor: not-allowed;

    &:active {
      background: $sidebar-tab-disabled-background-color;
    }
  }
}