// SIDEBAR
// -----------------------------------------------
// -----------------------------------------------
.sidebar-brand {
  height: ($base-point-grid * 11);
  padding: 0 ($base-point-grid * 3);
  background: rgba($brand-tertiary, 0.4);

  @include flexbox;
  @include justify-content(space-between);
  @include align-items(center);

  font-family: $brand-font-family;
  font-size: 1.625rem;
  font-weight: $font-bold;
  letter-spacing: 1px;
  color: $white;

  img {
    height: 42px;
    margin-right: ($base-point-grid * 2);
  }

  a {
    margin-left: ($base-point-grid * 6);

    @include links($white, $white, $white, $white);

    &:hover {
      text-decoration: none;
    }

    &.brand {
      margin-left: 0;

      @include flexbox;
      @include align-items(center);
      @include justify-content(center);

      width: 100%;
    }
  }

  .close {
    height: 28px;
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;

    &::before,
    &::after {
      background-color: #fff;
      content: " ";
      height: 100%;
      left: 98%;
      position: absolute;
      top: 34%;
      width: 2px;
    }

    &::before {
      transform: rotate(45deg);
    }

    &::after {
      transform: rotate(-45deg);
    }
  }
}
