:host {
  --tab-margin: 0 0 1rem 0;
  --tab-border-color: #dee2e6;
  --tab-item-font-size: 1rem;
  --tab-item-font-family: inherit;
  --tab-item-font-weight: inherit;
  --tab-item-color: #495057;
  --tab-item-background-color: inherit;
  --tab-item-active-font-weight: inherit;
  --tab-item-active-color: inherit;
  --tab-item-active-background-color: #fff;
  --tab-item-hover-color: inherit;
  --tab-item-hover-background-color: #f8f9fa;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

.tabs {
  margin: var(--tab-margin);
}

.tab-list {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--tab-border-color);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tab-item {
  color: var(--tab-item-color);
  background: var(--tab-item-background-color);
  font-size: var(--tab-item-font-size);
  font-family: var(--tab-item-font-family);
  font-weight: var(--tab-item-font-weight);
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  cursor: pointer;
  margin-bottom: -1px;

  a {
    color: inherit;
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }
  }

  &:hover {
    color: var(--tab-item-hover-color);
    background-color: var(--tab-item-hover-background-color);
    border-color: var(--tab-border-color);
  }

  &.active {
    color: var(--tab-item-active-color);
    background-color: var(--tab-item-active-background-color);
    border-color: var(--tab-border-color) var(--tab-border-color) var(--tab-item-active-background-color);
    font-weight: var(--tab-item-active-font-weight);
    margin-bottom: -1px;
  }
}