@import "../../themes/liberty.globals";

: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 {
  @include 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 {
  @include 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;

  .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, $primary_light);
}

/**
 * @prop --lu-tabs-selection-bar-color: color of active border
 */
.focus-box {
  @include position-horizontal(0, 0);

  display: none;

  position: absolute;
  bottom: 0;

  height: 3px;

  background-color: var(--lu-tab-focus-bar-color, $primary_lighter);

  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);

  .focus-box {
    display: block;
  }
}