@import "variables";

.nav-tabs {
  border-color: $tab-border;

  > li {
    a {
      padding: $padding-xs $padding-sm;
      color: $medium;

      &:hover,
      &:focus,
      &:active {
        background-color: transparent;
        border-color: transparent;
        color: $lightest;
      }
    }

    &.active {
      > a,
      > a:hover,
      > a:focus,
      > a:active {
        border-color: $tab-border;
        border-bottom-color: $tab-bg;
        background-color: $tab-bg;
        color: $lightest;
      }
    }
  }
}

.tab-content {
  width: 100%;
  height: $tab-pane-height;
  border: solid 1px $tab-border;
  border-top: none;
  text-shadow: none; /* Prevent inheritance from `body` */

  > .tab-pane {
    width: 100%;
    height: 100%;
    background-color: $tab-bg;

    &#url-pane {
      position: relative;
      padding: 3em 0;
      text-align: center;

      #url-sample {
        margin: 2em;
      }

      #bookmark {
        position: absolute;
        bottom: $padding-md;
        right: $padding-md;
        font-size: smaller;
        color: $alt-link-text;
        text-decoration: underline;

        &:hover,
        &:focus,
        &:active {
          color: $link-text;
        }
      }
    }

    &#text-pane {
      position: relative;

      #text-sample {
        position: absolute;
        z-index: 1;
        top: 45%;
        left: 0;
        width: 100%;
        text-align: center;
      }
    }
  }

  @media (min-width: $breakpoint-sm) {
    > .tab-pane {
      &#url-pane {
        padding: 10em 0;
      }
    }
  }
}
