.tabs {

  display: flex;
  border-bottom: 1px solid var(--tab-main-border-color);
  margin: 1em 0 2em 0;

  & + .sub-tabs { margin-top: -1.75rem; }

  .item {
    background: var(--tab-item-background-color);
    border: 1px solid var(--tab-item-border-color);
    color: var(--tab-item-color);
    border-radius: 0.15rem 0.15rem 0 0;
    text-decoration: none;
    text-align: center;
    padding: 0.33rem 0.75rem;
    align-self: flex-end;
    position: relative;
    top: 0px;
  }

  .item.active {
    background-color: var(--tab-item-active-background-color);
    border: 1px solid var(--tab-item-active-border-color);
    border-bottom: none;
    color: var(--tab-item-active-color);
    top: 1px;
    padding-top: calc(0.33rem - 3px);
    padding-bottom: calc(0.33rem + 3px);
  }

}

.tab-content {
  display: none;
  background-color: 1px solid var(--tab-content-background-color);
  border: 1px solid var(--tab-content-border-color);
}

.tab-content.active {
  display: inherit;
}

.sub-tabs {
  border-top: 1px solid var(--tab-main-border-color);
  display: flex;
  margin-bottom: 1rem;
  justify-content: flex-end;

  &.no-border {
    border-top: 0;
  }

  .item {
    align-self: flex-start;
    background: var(--tab-sub-item-background-color);
    border: 1px solid var(--tab-sub-item-border-color);
    border-radius: 0 0 0.15rem 0.15rem;
    color: var(--tab-sub-item-color);
    padding: 0.1rem 1.0rem;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
  }

  .item.active {
    background: var(--tab-sub-item-active-background-color);
    border-color: var(--tab-sub-item-active-border-color);
    border-top: none;
    top: -1px;
    padding-top: calc(0.1rem + 3px);
    padding-bottom: calc(0.1rem + 3px);
  }

  .item.right {
    margin-left: auto;
  }

}