/* @file
 * Vertical tabs override
 *
 */

.vertical-tab-wrapper {
  height: auto;
  >label {
    display: block;
    border-bottom: 1px solid color($utility, 'lighten-2');
    width: 100%;
    text-transform: uppercase;
    font-size: 20px;
  }
  ul.vertical-tabs__menu {
    @extend .col,
    .m3,
    .s12;

    position: relative;
    z-index: 2;
    margin-right: 0;
    border-right: 3px solid color($utility, 'darken-2');
    padding-right: 0 !important;
    width: 100%;
    ;
    li.vertical-tabs__menu-item {
      display: block;
      &:focus {
        outline: none;
      }
      a {
        display: block;
        padding: 1em;
        width: 100%;
        text-transform: uppercase;
        text-decoration: none;
        color: color($utility, 'darken-2');
        strong {
          letter-spacing: .5px;
          font-weight: normal;
        }
        span {
          display: block;
          text-transform: initial;
          font-size: .75em;
        }
        &:hover {
          color: color($secondary, 'lighten-2');
        }
      }
      &.is-selected {
        z-index: 2;
        margin-right: -3px;
        border-right: 3px solid color($secondary, 'lighten-2');
        background: color($utility, 'lighten-4');
        a {
          color: color($secondary, 'lighten-2');
        }
      }
    }
  }
  .vertical-tabs__panes {
    @extend .col,
    .m9,
    .s12;

    transition: max-height 0.66s ease-out; // add margin to go beyond border width 
    margin-left: -3px !important;
    border-left: 3px solid color($utility, base);
    padding-left: 1em;
    >details {
      border: 0;
      box-shadow: none;
      >summary {
        text-transform: uppercase;
        color: color($secondary, 'lighten-2');
      }
    }
  }
}

@media #{$small-and-down} {
  .vertical-tab-wrapper .vertical-tabs__panes {
    margin-left: 0;
    border-left: 0;
  }
  .vertical-tab-wrapper ul.vertical-tabs__menu {
    border-right: 0;
  }
}