porkchopclub/porkchop

$site-header-height: 44px;

.site-header-wrap {
  @include linear-gradient(to right, $blue, $red);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  z-index: $z-index-header;
}

.site-header {
  @include display(flex);
  height: $site-header-height;
  padding: 0 1rem;
  margin-bottom: 3px;
  background-color: $off-white;
}

.site-header-paddle {
  width: auto;
  height: $site-header-height;
  margin-right: 1rem;
}

.site-header-title {
  font-size: 1.4rem;
  font-weight: bold;
  line-height: $site-header-height;

  span {
    font-size: 0.9rem;
  }

  a {
    color: $blue-text;

    &:hover {
      text-decoration: none;
      border-bottom: 2px solid $red;
    }
  }
}

.site-header-padding {
  @include flex-grow(1);
}

.site-header-controls {
  $site-header-controls-padding: 6px;
  padding: $site-header-controls-padding 0;
  @include display(flex);

  a {
    background-color: $medium-grey;
    color: $off-white;
    line-height: $site-header-height - $site-header-controls-padding * 2;
    padding: 0 0.75rem;
    font-weight: bold;
    margin-right: 2px;

    $site-header-controls-button-radius: 6px;

    .label {
      margin-right: 0.25em;

      @include mobile {
        display: none;
      }
    }

    &:hover {
      text-decoration: none;
    }

    &:first-child {
      border-top-left-radius: $site-header-controls-button-radius;
      border-bottom-left-radius: $site-header-controls-button-radius;
    }

    &:last-child {
      border-top-right-radius: $site-header-controls-button-radius;
      border-bottom-right-radius: $site-header-controls-button-radius;
      margin-right: 0;
    }

    &.red {
      @include linear-gradient(30deg, shade($red, 15%), $red, tint($red, 15%));

      &:hover {
        background-image: none;
        background-color: shade($red, 15%);
      }
    }

    &.green {
      @include linear-gradient(30deg, shade($green, 15%), $green, tint($green, 15%));

      &:hover {
        background-image: none;
        background-color: shade($green, 15%);
      }
    }

    &.blue {
      @include linear-gradient(30deg, shade($blue, 15%), $blue, tint($blue, 15%));

      &:hover {
        background-image: none;
        background-color: shade($blue, 15%);
      }
    }
  }
}

.site-header-menu-button {
  font-size: 26px;
  cursor: pointer;
}