@value (colorTextDisabled, colorTextPrimary, colorTextSecondary, colorBackgroundTertiary, colorButtonFillTertiaryEnabled) from '../../../styles/variables/_color.css';
@value (size38, size30) from '../../../styles/variables/_size.css';
@value (spaceSmall) from '../../../styles/variables/_space.css';
@value (borderWidthPrimary) from '../../../styles/variables/_border.css';

button.buttonTabWrapper {
  padding-left: spaceSmall;
  padding-right: spaceSmall;
  height: size38;
  color: colorTextSecondary;
  min-width: initial;
  text-align: left;
}

.buttonTabWrapper .icon {
  color: colorTextSecondary;
}

button.buttonTabWrapper:hover {
  color: colorTextPrimary;
  background-color: initial;
}

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

.buttonTabWrapper.mediumButtonTab {
  height: size38;
}

.buttonTabWrapper.smallButtonTab {
  height: size30;
}

.onlyIcon {
  color: colorTextSecondary;
  padding-left: initial;
  padding-right: initial;
}

.mediumButtonTab.onlyIcon {
  max-width: size38;
}

.smallButtonTab.onlyIcon {
  max-width: size30;
}

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

.buttonTabWrapper.isSelected:hover {
  background-color: colorBackgroundTertiary;
}

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

.buttonTabWrapper.disabled {
  color: colorTextDisabled;
}

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

.buttonTabWrapper.isUnSelected {
  padding-left: spaceSmall;
  padding-right: spaceSmall;
  border: borderWidthPrimary solid colorButtonFillTertiaryEnabled;
}