/*! Tabs */
:root {
  --tab-bg-color: var(--body-bg-color);
  --tab-bg-color-hover: var(--body-bg-color);
  --tab-bg-color-active: var(--link-color);
  --tab-bg-color-disabled: var(--body-bg-color);
  --tab-border-radius: var(--component-border-radius);
  --tab-color: var(--link-color);
  --tab-color-hover: var(--link-color-hover);
  --tab-color-active: var(--color-white);
  --tab-color-disabled: var(--state-secondary);
  --tab-padding-x: var(--component-padding-x);
  --tab-padding-y: calc(var(--component-padding-y) / 2);
  --tab-focus-width: var(--input-focus-width);
  --tab-speed: var(--component-speed);

  --tab-pane-border-color: var(--component-border-color);
  --tab-pane-border-radius: var(--component-border-radius);
  --tab-pane-border-width: var(--component-border-width);
  --tab-pane-padding-x: var(--component-padding-x);
  --tab-pane-padding-y: var(--component-padding-y);
}

.tabs {
  width: 100%;
  margin-bottom: 1.5rem;

  & .tabs-nav {
    margin-bottom: 1.5rem;
    user-select: none;

    & a {
      color: var(--tab-color);
      text-decoration: none;
      background-color: var(--tab-bg-color);
      border-radius: var(--tab-border-radius);
      padding: var(--tab-padding-y) var(--tab-padding-x);
      display: inline-block;
      transition: var(--tab-speed) box-shadow;

      &:hover {
        color: var(--tab-color-hover);
        background-color: var(--tab-bg-color-hover);
        text-decoration: none;
      }

      &:focus {
        outline: none;

        &:not(.disabled) {
          box-shadow: 0 0 0 var(--tab-focus-width) color(var(--tab-bg-color-active) alpha(50%));

          /* Force a new stacking context so focus rings don't get truncated by adjacent elements */
          transform: translateZ(0);
        }
      }

      &.active {
        color: var(--tab-color-active);
        background-color: var(--tab-bg-color-active);
        cursor: default;
      }

      &.disabled {
        color: var(--tab-color-disabled);
        background-color: var(--tab-bg-color-disabled);
        cursor: not-allowed;
      }
    }
  }

  & .tabs-pane {
    border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
    border-radius: .25rem;
    padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);

    &:not(.active) {
      display: none;
    }

    & > :last-child {
      margin-bottom: 0;
    }
  }
}