:host {
  --lu-tab-background-color: #ffffff;
  --lu-tab-flex: auto;
  display: flex;
  position: relative;
  flex: auto;
  flex: var(--lu-tab-flex);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}

/**
 * @prop --lu-tab-inactive-color: color of inactive text
 * @prop --lu-tab-button-padding-top: top padding of tab 
 * @prop --lu-tab-button-padding-right: right padding of tab 
 * @prop --lu-tab-button-padding-bottom: bottom padding of tab 
 * @prop --lu-tab-button-padding-left: left padding of tab
 */
.tab-container {
  padding: var(--lu-tab-button-padding-top, 1px) var(--lu-tab-button-padding-right, 6px) var(--lu-tab-button-padding-bottom, 1px) var(--lu-tab-button-padding-left, 6px);
  width: 100%;
  border-style: none;
  background-color: var(--lu-tab-background-color);
  color: var(--lu-tab-inactive-color, #222222);
  cursor: pointer;
}

/**
 * @prop --lu-tab-outline: outline of tab when focused
 */
.tab-container:focus {
  outline: var(--lu-tab-outline, none);
}

/**
 * @prop --lu-tab-padding-top: top padding of tab
 * @prop --lu-tab-padding-right: right padding of tab
 * @prop --lu-tab-padding-bottom: bottom padding of tab
 * @prop --lu-tab-padding-left: left padding of tab
 * @prop --lu-tab-font-size: font size of tab
 */
.inner-container {
  padding: var(--lu-tab-padding-top, 14px) var(--lu-tab-padding-right, 12px) var(--lu-tab-padding-bottom, 14px) var(--lu-tab-padding-left, 14px);
  position: relative;
  font-size: var(--lu-tab-font-size, 16px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/**
 * @prop --lu-tab-active-border-color: color of active border
 * @prop --lu-tab-active-color: color of active text
 */
:host(.is-active) {
  cursor: auto;
}
:host(.is-active) .tab-container {
  color: var(--lu-tab-active-color, #222222);
  cursor: auto;
}

:host(.is-active.no-slide) {
  border-bottom: 3px solid var(--lu-tab-active-border-color, #256EC1);
}

/**
 * @prop --lu-tabs-selection-bar-color: color of active border
 */
.focus-box {
  left: 0;
  right: 0;
  display: none;
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: var(--lu-tab-focus-bar-color, #9BC7EE);
  z-index: 1;
}

/**
 * @prop --lu-tab-focused-border-color: color of bottom border when focused
 * @prop --lu-tab-outline: outline of tab when focused
 */
:host(:focus) {
  outline: var(--lu-tab-outline, none);
}
:host(:focus) .focus-box {
  display: block;
}