@value (
  colorTextDisabled, 
  colorBorderPrimary, 
  colorTextPrimary, 
  colorTextSecondary, 
  colorFillSecondary
) from '../../../styles/variables/_color.css';
@value (
  size42, 
  size34
) from '../../../styles/variables/_size.css';
@value (
  spaceNone,
  spaceSmall,
  spaceMedium
) from '../../../styles/variables/_space.css';
@value (
  borderWidthPrimary,
  borderWidthNone,
  borderRadiusNone,
  borderRadiusMedium
) from '../../../styles/variables/_border.css';
@value (elevationCard) from '../../../styles/variables/_elevation.css';

.buttonTabWrapper {
  border: borderWidthPrimary solid colorBorderPrimary;
  border-radius: borderRadiusNone;
  border-right-width: borderWidthNone;
  text-align: left;
  min-width: initial;
  padding: spaceNone spaceMedium;
  height: size42;
  color: colorTextSecondary;

  &.mediumButtonTab {
    height: size42;
  }

  &.smallButtonTab {
    height: size34;
  }

  &.disabled {
    color: colorTextDisabled;
    border: borderWidthPrimary solid colorBorderPrimary;
    border-right-width: borderWidthNone;
  }

  &.rightCurved {
    border-right-width: borderWidthPrimary;
    border-top-right-radius: borderRadiusMedium;
    border-bottom-right-radius: borderRadiusMedium;
  }

  &.leftCurved {
    border-top-left-radius: borderRadiusMedium;
    border-bottom-left-radius: borderRadiusMedium;
  }

  &:hover {
    color: colorTextPrimary;
    background-color: initial;
  }

  &:focus {
    z-index: elevationCard;
  }

  &.icon {
    color: colorTextSecondary;
  }
}

.buttonTabWrapper:hover .icon {
  color: colorTextPrimary;
}

.onlyIcon {
  color: colorTextSecondary;
  padding: spaceNone spaceSmall;
}

.buttonTabWrapper.isSelected {
  color: colorTextPrimary;
  background-color: colorFillSecondary;
}

.buttonTabWrapper.isSelected .icon {
  color: colorTextPrimary;
}

.buttonTabWrapper.disabled .icon {
  color: colorTextDisabled;
}