@import "typography";
@import "mixins";
@import "branding";

// Tabs styling
.tabset-ctrl#shop-tabs {

  .tab-buttons {
    background: url("/assets/gray_jean.png") top left repeat;

    @include box-shadow(inset 0 2px 3px 0 rgba(0, 0, 0, 0.15));

    color: $dark-grey;

    .row:first-child {
      display: flex;
      justify-content: space-between;
    }
  }

  .tab {
    text-align: center;
    border-top: 4px solid transparent;
    display: inline-block;
    width: 100%;

    >a {
      outline: none;
      display: block;
      background-color: #efefef;
      color: #222;
      font-family: "Oswald", sans-serif;
    }

    a {
      @include headingFont;

      background: transparent;
      text-transform: uppercase;
      line-height: 1;
      font-size: 0.875em;
      text-shadow: 0 -1px 1px #ffffff;
      padding: 1em 2em;
      border: none;

      &:hover, &:focus, &:active {
        color: $clr-brick-bright;
      }

      &, &:hover {
        background: none;
      }

      @media all and (max-width: 640px) {
        padding: 0.35em 0 0.65em 0;
        text-shadow: none;
      }
    }

    &.selected {
      border-bottom: 4px solid $clr-brick;

      a {
        color: $clr-brick;
      }
    }
  }

  // content revealed in accordion

  .tab-view {
    margin-bottom: 5em;
    background: none;
    border: none;

    .content {
      padding: 1.25em 0;
      background-color: $white;

      img {
        margin: 0px 0px 0px 40px;
      }

      h5 {
        margin-bottom: 1em;
      }

      p {
        max-width: 100%;

        @media all and (max-width: 768px) {
          height: auto !important;
        }
      }

      ul {
        list-style-type: none;
        padding-left: none;
      }

      .header {
        text-align: center;
        text-transform: uppercase;
        color: $dark-grey;
        border-bottom: 1px solid $disabled-dark;
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.25rem;
        font-size: 0.875rem;
      }
    }
  }
}
