@nano-prefix: nano;
.@{nano-prefix} {
  .logo() {
    display: flex;
    height: @layout-header-height;
    padding-left: @padding-md;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.16);
    overflow: hidden;

    img, h1 {
      display: inline-block;
    }

    img {
      margin-right: @padding-md;
      max-width: 36px;
    }

    h1 {
      margin: 0;
      padding: 0;
      color: @text-dark-1;
      font-size: @font-size-3;
      font-weight: normal;
      transition: opacity @ease-out @animation-duration-base;
    }
  }

  &-logo {
    .logo;
  }
}

.@{ant-prefix} {
  &-layout-sider-collapsed {
    .@{nano-prefix} {
      &-logo {
        h1 {
          opacity: 0;
        }
      }
    }
  }
}