@import '@common/styles/common.less';

.container {
  width: 100%;
  padding: 0 24px;
  .md-flex;
  .flex-column;
  .items-center;

  .logo {
    width: 197px;
    margin: 32px auto 40px;
  }

  .searchBarContainer {
    width: 100%;
    height: 40px;
    font-size: 16px;
    position: relative;

    .input {
      height: 100%;

      &::placeholder {
        font-size: 14px;
      }
    }

    .searchResultList {
      padding: 0;
      margin: 0;
      height: 0;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      border-radius: 8px;
      overflow: hidden;
      background-color: #ffffff;
      box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05),
        0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
      list-style: none;
      z-index: 10;
      &.show {
        height: auto;
        max-height: 280px;
        overflow-y: auto;
      }
      .searchResultItem {
        padding: 10px 10px 0;
        cursor: pointer;
        font-size: 14px;
        .flex-column;
        .md-flex;
        .type {
          background: #f5f5f5;
          border-radius: 2px;
          height: 26px;
          font-family: OpenSauceOne-Bold, sans-serif;
          color: #000000;
          line-height: 14px;
          padding-left: 11px;
          margin-bottom: 9px;
          .items-center;
          .md-flex;
        }
        .content {
          padding: 11px;
          transition: opacity 0.3s;

          &:hover {
            opacity: 0.3;
          }
          .title {
            margin: 0 0 4px;
            .text-ellipsis;
          }
          .link {
            text-decoration: underline;
            display: block;
            .text-ellipsis;
          }
          .iconImg {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 6px;
          }
        }
      }
    }
  }

  .navbar {
    margin: 100px 30px 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    a {
      &:not(:last-child) {
        margin-right: 3px;
        margin-bottom: 10px;
      }
    }

    img {
      width: 26px;
      height: 26px;
    }
  }
}
