//
// Core: Brand
//

// @include brand-variant($sidebar-dark-bg, $sidebar-dark-color);

.brand-container {
  display: grid;
  grid-template-areas: "brand-link pushmenu";
  justify-content: space-between;
  font-size: $navbar-brand-font-size;
  transition: width $transition-speed $transition-fn;
  padding: $brand-link-padding-y $sidebar-padding-x;
  white-space: nowrap;
  overflow: hidden;

  .brand-link {
    grid-area: brand-link;

    &:hover {
      color: $white;
      text-decoration: none;
    }

    .brand-image {
      float: left;
      line-height: .8;
      margin-left: .8rem;
      margin-right: .5rem;
      margin-top: -3px;
      max-height: 33px;
      width: auto;
    }
  }

  .pushmenu {
    grid-area: pushmenu;
  }

  .sidebar-bg-dark & {
    border-bottom: $brand-link-border-buttom solid tint-color($dark, 10%);

    .brand-link,
    .pushmenu {
      color: rgba($white, .8);

      &:hover {
        color: $white;
      }
    }
  }

  .sidebar-bg-light & {
    border-bottom: $brand-link-border-buttom solid $gray-300;

    .brand-link,
    .pushmenu {
      color: rgba($black, .8);

      &:hover {
        color: $black;
      }
    }
  }
}

.sidebar-collapse:not(.sidebar-hover) {
  .brand-container {
    justify-content: center;

    .brand-link {
      width: 0;
    }
  }
}