@spaced-out/ui-design-system/lib/components/Tabs/Tab/Tab.module.css

Sense UI components library

@value (colorFillPrimary, colorTextSecondary, colorFillNone, colorFocusPrimary, colorTextPrimary, colorTextDisabled) from '../../../styles/variables/_color.css';

@value (spaceXXSmall) from '../../../styles/variables/_space.css';

@value (sizeFluid, size42, size38) from '../../../styles/variables/_size.css';

@value (borderWidthTertiary) from '../../../styles/variables/_border.css';

.button {
  border: borderWidthTertiary solid colorFillNone;
  box-sizing: border-box;
  display: flex;
  cursor: pointer;
}

.button.mediumSize {
  height: size42;
}

.button.smallSize {
  height: size38;
}

.button:focus {
  border: borderWidthTertiary solid colorFocusPrimary;
}

.button:focus .iconTextWrap {
  color: colorTextPrimary;
}

.button .disabled {
  cursor: not-allowed;
}

.iconTextWrap {
  display: flex;
  flex-direction: row;
  gap: spaceXXSmall;
  align-items: center;
  justify-content: center;
  color: colorTextSecondary;
  border-bottom: borderWidthTertiary solid colorFillNone;
  height: sizeFluid;
  white-space: nowrap;
}

.iconTextWrap.selected {
  color: colorTextPrimary;
  border-bottom: borderWidthTertiary solid colorFillPrimary;
}

.iconTextWrap.disabled {
  color: colorTextDisabled;
  border-bottom: borderWidthTertiary solid colorFillNone;
}

.iconTextWrap:hover {
  color: colorTextPrimary;
}

.icon {
  color: inherit;
}

.tabContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: inherit;
}