/* Tabs
/* ========================================================================== */

@import "vars";

.tabs {
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 300;
  line-height: 20px;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  position: relative;

  ul {
    display: inline-block;
    position: relative;
    margin-top: -10px;

    &:before,
    &:after {
      content: "";
      position: absolute;
      height: 1px;
      width: 2000px;
      background-color: @gray;
      top: 20px;
    }
    &:before {
      right: 100%;
      margin-right: 15px;
    }
    &:after {
      left: 100%;
      margin-left: 15px;
    }

    @media (max-width: 767px) {
      padding-bottom: 15px;
      border-bottom: solid 1px @gray;
    }
  }

  li {
    display: inline-block;
    margin-top: 10px;
    a {
      padding: 0;
      color: @dark;
      &, &:hover {
        background-color: transparent;
      }
      &:hover {
        color: @gray;
      }
    }
    &.active {
      font-weight: 900;
      a {
        color: @dark;
        background-color: transparent;
      }
    }

    @media (min-width: 768px) {
      & + li {
        position: relative;
        margin-left: 20px;
        &:before {
          content: '';
          display: block;
          width: 6px;
          height: 1px;
          position: absolute;
          left: -14px;
          top: 10px;
          background-color: @dark;
        }
      }
    }
    
    @media (max-width: 767px) {
      display: block;
    }
  }
}