.tabs,
.tab-list {
  .reset;
}

.tabs {
  margin-top: 2em;

  button,
  a {
    position: relative;
    display: block;
    width: 100%;
    padding: 28px 20px;
    .webfont-regular();
    font-size: 1.375em;
    text-align: left;
    z-index: 1;
  }

  button,
  a,
  a:link,
  a:visited {
    border-bottom: 1px solid @gray-10;
    border-top: 4px solid @gray-10;
    border-left: 0;
    border-right: 0;
    background: @gray-5;
    color: @gray-80;
  }

  button:hover,
  button:focus,
  a:hover,
  a:active,
  a:focus {
    color: @black;
    background: #fff;
    z-index: 2;
  }

  button:focus,
  a:focus {
    outline: 1px dotted @black;
    outline-offset: 1px;
  }

  .active-tab {
    button,
    button:hover,
    button:focus,
    a,
    a:link,
    a:visited,
    a:hover,
    a:active,
    a:focus {
      border-bottom: none;
      border-top: 4px solid @green-60;
      background: #fff;
      color: @black;
    }
  }
}

.tab-list {
  list-style: none;
}

.tab-list + .tab-list {
  button,
  a {
    border-left: 1px solid @gray-10;
  }
}

.next-steps {
  .tab-list {
    .grid_column( 6 );
    // No gutters
    border-left: 0;
    border-right: 0;
  }
}

.form-explainer {
  .tab-list {

    .grid_column( 6 );
    // No gutters
    border-left: 0;
    border-right: 0;

    .respond-to-max(767px, {
      button,
      a {
        padding: 1em;
        font-size: 1em;
      }
     
    });
    
    .respond-to-max(332px, {
      .tab-label {
        display: none;
      }
    });
  }
}

.tab-content {
  margin-top: 3.125em;
}

// hide tabbed content when js is enabled
.js {
  .tab-content {
    display: none;
  }

  & .default {
    display: block;
  }
}
