header {
  background: $main2;
  background: linear-gradient(to right, $main1, $main2);
  width: 100%;
  padding: 25px 0;

  @include media(5) {
    padding: 15px 0;
  }

  .dark & {
    opacity: .9;
  }
}

.logo {
  float: left;

  @include media(5) {
    width: 80px;
    height: auto;
    margin: 7px 0 0 0;

    img {
      width: 100%;
      height: auto;
    }
  }
}

.sort-wrap {
  float: right;
  margin: 4px 0 0 0;
  width: auto;

  .icon-sort-time,
  .icon-sort-star {
    float: left;
    width: 32px;
    height: 30px;
    margin: 0 0 0 15px;
    cursor: pointer;
    opacity: .5;

    @include transition(opacity);

    &.active {
      opacity: 1;
    }

    &:active {
      opacity: .3;
    }

    &:first-child {
      margin: 0;
    }
  }
}

.icon-sort-time {
  background: url(../../../public/assets/img/sort-time.png);
}

.icon-sort-star {
  background: url(../../../public/assets/img/sort-star.png);
}

.icon-constrast {
  float: left;
  width: 34px;
  height: 34px;
  margin: 0 0 0 30px;
  cursor: pointer;
  padding: 10px;

  &:active {
    opacity: .8;
  }

  i {
    background: darken($dark, 20%);
    border-radius: 100%;
    width: 100%;
    height: 100%;
    float: left;

    .dark & {
      background: #fff;
    }
  }
}

.site-nav {
  float: right;
  margin: 7px 60px 0 0;

  @include media(5) {
    float: left;
    width: 100%;
    margin: 20px 0 0 0;
  }

  ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    float: left;
    margin: 0 20px 0 0;

    &:last-child {
      margin: 0;
    }
  }

  a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 2px solid transparent;

    &.router-link-active {
      border-bottom: 2px solid #fff;
    }

    &:active {
      opacity: .6;
    }

    @include media(5) {
      font-size: 14px;
    }
  }
}