@import '../../styles/themes';

@include nb-install-component() {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .left {
    order: 0;
    flex-direction: row;
  }
  .right {
    order: 1;
    flex-direction: row-reverse;
  }

  .header-container {
    display: flex;
    align-items: center;

    .navigation {
      padding-right: nb-theme(padding);
      font-size: 2.5rem;
    }

    .logo {
      padding: 0 nb-theme(padding);
      font-size: 1.75rem;
      font-weight: nb-theme(font-weight-bolder);
      border-left: 1px solid nb-theme(separator);

      span {
        font-weight: nb-theme(font-weight-normal);
      }
    }

    .theme-buttons {
      margin-left: 3rem;
      button {
        margin-right: 1rem;
      }
    }
  }

  .toggle-layout /deep/ a {
    text-decoration: none;
    line-height: 1;

    i {
      color: nb-theme(color-success);
      font-size: 1.75rem;

      @include nb-for-theme(cosmic) {
        color: nb-theme(link-color-active);
        text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
      }
    }
  }
}