@kelvininc/ui-components/dist/collection/components/tab-item/tab-item.css

Kelvin UI Components

/** HEADINGS **/
/** LABELS **/
/** SPANS **/
/** PARAGRAPHS **/
/** TODO: CODE/CONSOLE **/
@property --rotation {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate-border {
  to {
    --rotation: 360deg;
  }
}
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
kv-dropdown-base:not(.hydrated) > [slot=list] {
  display: none;
}

:host .tab-item-container {
  display: flex;
  align-items: center;
  width: fit-content;
  height: 100%;
  user-select: none;
  white-space: nowrap;
  gap: var(--tab-secondary-gap-default);
  cursor: pointer;
}
:host .tab-item-container.primary {
  padding: 0 var(--tab-primary-padding-x-default);
}
:host .tab-item-container.primary .label {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  color: var(--tab-primary-label-default);
}
:host .tab-item-container.primary.selected .label {
  color: var(--tab-primary-label-selected);
}
:host .tab-item-container.primary.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
:host .tab-item-container.primary.disabled .label {
  color: var(--tab-primary-label-disabled);
}
:host .tab-item-container.secondary {
  height: var(--tab-secondary-height-default);
  padding: var(--tab-secondary-padding-y-default) var(--tab-secondary-padding-x-default);
  box-sizing: border-box;
  border: var(--tab-secondary-border-thickness-default) solid var(--transparent);
  border-radius: var(--tab-secondary-radius-default);
  align-self: center;
}
:host .tab-item-container.secondary kv-icon {
  --icon-color: var(--icon-tab-icon-color-default);
  --icon-width: var(--icon-tab-icon-size-default);
  --icon-height: var(--icon-tab-icon-size-default);
}
:host .tab-item-container.secondary .label {
  font-family: Proxima Nova;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--tab-secondary-label-default);
}
:host .tab-item-container.secondary:hover:not(.disabled) {
  background: var(--tab-secondary-background-hover);
}
:host .tab-item-container.secondary:hover:not(.disabled) kv-icon {
  --icon-color: var(--icon-tab-icon-color-hover);
}
:host .tab-item-container.secondary:hover:not(.disabled) .label {
  color: var(--tab-secondary-label-hover);
}
:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) {
  background: var(--tab-secondary-background-selected);
  border-color: var(--tab-secondary-border-color-default);
}
:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) kv-icon {
  --icon-color: var(--icon-tab-icon-color-selected);
}
:host .tab-item-container.secondary.selected:not(:hover):not(.disabled) .label {
  color: var(--tab-secondary-label-selected);
}
:host .tab-item-container.secondary.disabled {
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
  background: var(--tab-secondary-background-disabled);
  border-color: var(--tab-secondary-border-color-disabled);
}
:host .tab-item-container.secondary.disabled kv-icon {
  --icon-color: var(--icon-tab-icon-color-disabled);
}
:host .tab-item-container.secondary.disabled .label {
  color: var(--tab-secondary-label-disabled);
}
:host .tab-item-container.secondary.only-icon {
  height: var(--icon-tab-height-default);
  padding: var(--icon-tab-padding-y-default) var(--icon-tab-padding-x-default);
  border: var(--icon-tab-border-thickness-default) solid var(--transparent);
  border-radius: var(--icon-tab-radius-default);
}
:host .tab-item-container.secondary.only-icon:hover:not(.disabled) {
  background: var(--icon-tab-background-hover);
}
:host .tab-item-container.secondary.only-icon.selected:not(:hover):not(.disabled) {
  background: var(--icon-tab-background-selected);
  border-color: var(--icon-tab-border-color-default);
}
:host .tab-item-container.secondary.only-icon.disabled {
  background: var(--icon-tab-background-disabled);
  border-color: var(--icon-tab-border-color-disabled);
}