openfoodnetwork/app/assets/stylesheets/darkswarm/tabset.scss

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

.tabset-ctrl:not(#shop-tabs) {
  .tab-view {
    padding-top: 30px;
  }

  .tab {
    text-align: center;

    @include breakpoint(phablet) {
      text-align: left;
    }

    a {
      @include headingFont;

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

      @include breakpoint(phablet) {
        padding: 0.35em 0 0.65em 0;
        text-shadow: none;
      }
    }

    border-bottom: 4px solid transparent;

    &:hover, &:focus, &:active {
      transition: all 0.4s ease-in-out;
      border-bottom: 4px solid $clr-brick-bright;
      cursor: pointer;

      @include breakpoint(phablet) {
        transition: none;
        color: white;
        background-color: $clr-brick-bright;
      }

      a {
        color: $clr-brick-bright;

        @include breakpoint(phablet) {
          color: #ffffff;
        }
      }
    }

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

      @include breakpoint(phablet) {
        background-color: $clr-brick;
      }

      a {
        color: $clr-brick;

        @include breakpoint(phablet) {
          color: #ffffff;
        }
      }
    }
  }
}