@import url(../_common/style.css);

[page="login"] {
  grid-template-rows: 1fr auto;
  min-height: 100%;
}

.main {
  & [panel] {
    position: relative;
    display: grid;
    overflow: hidden;
    &.hidden {
      display: none;
    }
  }

  & #password-reminder {
    margin: 0;
    font-weight: 400;
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
    color: var(--color-lightest-all);
    &:hover {
      color: var(--color-darker-all);
    }
  }
}
[theme="light"] {
  & #password-reminder {
    &:hover {
      color: var(--color-purple);
    }
  }
}
[theme="dark"] {
  & #password-reminder {
    &:hover {
      color: var(--color-lightgreen);
    }
  }
}

.input {
  width: 100%;
  font-size: var(--font-size-h1);
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: var(--font-size-xs);
  font-family: var(--main-font);
  font-weight: 300;
  color: var(--color-light);

  &::before,
  &::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-light);
    margin: 0 10px;
  }
}

.icon {
  position: relative;
  width: 30px;
  height: 30px;
}
#google_login_btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  & .icon {
    background-image: url(./images/google.svg);
  }
}
#eduid_login_btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  & .icon {
    width: 80px;
    background-image: url(./images/eduid.png);
    background-size: cover;
  }
}