@import 'open-color/open-color.css';

:root {
  --baseHeight: 30px;
  --fontSize: 14px;
}

.footer {
  width: 100%;
  height: 100px;
  background-color: var(--oc-white);
  color: var(--oc-gray-7);
  border-top: 1px solid var(--oc-gray-3);
}

.footer-en {
  font-family: 'Open Sans', 'PingFangSC-Light', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', monospace, sans-serif;
}

.footer-zh {
  /* font-weight: 300; */
  font-family: 'Open Sans', 'PingFangSC-Light', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', monospace, sans-serif;
}

.footerWrapper {
  width: 80%;
  height: 100%;
  min-width: 675px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.footerSection {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.footerLeft {
  composes: footerSection;
  justify-content: flex-start;
  cursor: default;
  user-select: none;

  &:hover {
    & .footerImage {
      filter: grayscale(0%);
    }
  }
}

.footerRight {
  composes: footerSection;
  flex: 1;
  font-size: var(--fontSize);
  justify-content: flex-end;

  & a {
    color: var(--oc-gray-7);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.footerLogo {
  font-size: 2em;
}

.footerIntro {
  font-size: var(--fontSize);
  color: var(--oc-gray-5);
  margin-right: 10px;
  font-size: 1.3rem;
  font-family: 'Geo', 'PingFangSC-Light', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', monospace, sans-serif;
}

.footerImage {
  width: var(--baseHeight);
  height: var(--baseHeight);
  border-radius: 50%;
  filter: grayscale(100%);
  transition: filter 0.3s;
}

.footerLink:not(:last-child) {
  margin-right: 5px;
}

.footerLink:last-child {
  margin-left: 5px;
}

@media (max-width: 700px) {
  .footer {
    height: 60px;
  }

  .footerWrapper {
    max-width: initial;
    min-width: initial;
    justify-content: flex-start;
    width: 90%;
  }

  .footerImage {
    width: 25px;
    height: 25px;
  }

  .footerLogo {
    font-size: 1.5em;
  }
}
