.sidebar-dark .sidebar-brand, .sidebar-brand {
  background-color: $deep-orange-900;
  padding-left: 0;
  padding-right: 0;
  @include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 75%, transparent 75%),
          linear-gradient($deep-orange-900, darken($deep-orange-900, 10%)));
}

.sidebar-dark {
  .active > .sidebar-menu-button {
    background-color: $sm-dark-active-button-bg;
    &:hover {
      background-color: $sm-dark-hover-button-bg;
    }
  }

  .open > .sidebar-menu-button {
    color: $sidebar-dark-link-color;
  }
}

.sidebar-menu-button {
  cursor: pointer;
}

.sidebar-brand {
  text-align: center;
  font-family: $font-family-serif;
  position: relative;
  top: 0;
  left: 0;

  > .sidebar-brand-link {
    position: relative;
    top: 0;
    left: 0;
    color: #fff;
    display: block;
    width: 100%;
    height: 100%;
    &:hover, &:focus {
      color: #fff;
      text-decoration: none;
    }

    > .brand-f-hole {
      font-size: 1.6em;
      color: rgba(0, 0, 0, 0.8);
      position: absolute;
      top: 0.4em;
      left: 0;
      right: 0;
      margin: 0 auto;
      @include transform(translate(-10px, 0));
    }

    > .brand-text {
      text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9);

      &.brand-text-left {
        margin-right: 10px;
      }
    }
  }

  > .strings-layer {
    @include theme-strings-layer(26px, 1px, rgba(255, 255, 255, 0.3), 7px);
    @include transform(translate(-10px, 0));
  }
}

.sidebar-menu-icon {
  text-align: center;
  margin-right: 0.1em;
}