@import '~scss/variables';

.header {
  position: relative;
  height: $header-height;
  background-color: $body-bg-color;

  &.inAppsPage {
    background-color: rgba(24, 29, 40, 0.2);
    :global {
      .header-bottom {
        border-style: none;
        border-image: none;
      }
    }
  }
}

:global {
  .header-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    border-style: solid;
    border-width: 1px 0 0 0;
    border-image-source: radial-gradient(
      circle at 50% 3%,
      rgba(193, 201, 209, 0.53),
      rgba(255, 255, 255, 0.2)
    );
    border-image-slice: 1;
  }

  .header-shadow .header-bottom {
    display: none;
  }
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 30px;
  transform: translate(-50%, -50%);

  .inAppsPage & {
    color: white;
  }
}

.navs {
  display: inline-block;
  padding: 18px 20px;

  button {
    padding: 5px 11px !important;

    & + button {
      margin-left: 12px !important;
    }

    .inAppsPage & {
      color: white;

      &:hover {
        color: $text-color;
      }
    }
  }
}

.right {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);

  button {
    padding: 5px 19px !important;
  }
}

.loginInfo {
  margin-left: 33px;
}
