:host {
  background-color: var(--default-bg);
  border-radius: var(--radius);
  width: 100%;
  height: 100%;
  overflow: hidden;
}
:host(.noActiveHeader) .tabName.active .tempBorder {
  width: 100%;
  display: block;
}
arv-icon {
  margin-bottom: 4px;
}
.tempBorder {
  display: none;
}
.tempBorder,
.border {
  position: absolute;
  height: 2px;
  bottom: 0px;
  left: 0;
  background-color: var(--default-darker);
  transition: all 0.3s;
}
.header {
  display: flex;
  box-shadow: 0px 0px 3px 2px rgba(3, 3, 3, 0.27);
  position: relative;
  flex-wrap: nowrap;
  background-color: var(--default-shade);
}
.tabName {
  white-space: nowrap;
  padding: 1em 2em;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s;
  width: 100%;
  text-align: center;
  color: var(--font-color);
  position: relative;
}

.tabName.active,
.tabName:hover {
  background-color: var(--default-highlight);
}
:host(.right) .header {
  justify-content: flex-start;
}
:host(.center) .header {
  justify-content: center;
}
:host(.left) .header {
  justify-content: flex-end;
}
:host(.right) .tabName,
:host(.center) .tabName,
:host(.left) .tabName {
  width: auto;
}

:host(.primary) .header {
  background-color: var(--primary-color);
}
:host(.primary) .tabName {
  color: var(--primary-text-color);
}
:host(.primary) .tabName.active,
:host(.primary) .tabName:hover {
  background-color: var(--primary-highlight);
}
:host(.primary) .border,
:host(.primary) .tempBorder {
  background-color: var(--secondary-color);
}

:host(.secondary) .header {
  background-color: var(--secondary-color);
}
:host(.secondary) .tabName {
  color: var(--secondary-text-color);
}
:host(.secondary) .tabName.active,
:host(.secondary) .tabName:hover {
  background-color: var(--secondary-highlight);
}
:host(.secondary) .border,
:host(.secondary) .tempBorder {
  background-color: var(--primary-color);
}

:host(.success) .header {
  background-color: var(--success-color);
}
:host(.success) .tabName {
  color: var(--success-text-color);
}
:host(.success) .tabName.active,
:host(.success) .tabName:hover {
  background-color: var(--success-highlight);
}
:host(.success) .border,
:host(.success) .tempBorder {
  background-color: var(--primary-color);
}

:host(.warning) .header {
  background-color: var(--warning-color);
}
:host(.warning) .tabName {
  color: var(--warning-text-color);
}
:host(.warning) .tabName.active,
:host(.warning) .tabName:hover {
  background-color: var(--warning-highlight);
}
:host(.warning) .border,
:host(.warning) .tempBorder {
  background-color: var(--primary-color);
}

:host(.danger) .header {
  background-color: var(--danger-color);
}
:host(.danger) .tabName {
  color: var(--danger-text-color);
}
:host(.danger) .tabName.active,
:host(.danger) .tabName:hover {
  background-color: var(--danger-highlight);
}
:host(.danger) .border,
:host(.danger) .tempBorder {
  background-color: var(--primary-color);
}

:host(.dark) .header {
  background-color: var(--dark-color);
}
:host(.dark) .tabName {
  color: var(--dark-text-color);
}
:host(.dark) .tabName.active,
:host(.dark) .tabName:hover {
  background-color: var(--dark-highlight);
}
:host(.dark) .border,
:host(.dark) .tempBorder {
  background-color: var(--light-color);
}

:host(.light) .header {
  background-color: var(--light-color);
}
:host(.light) .tabName {
  color: var(--light-text-color);
}
:host(.light) .tabName.active,
:host(.light) .tabName:hover {
  background-color: var(--light-highlight);
}
:host(.light) .border,
:host(.light) .tempBorder {
  background-color: var(--dark-color);
}