@import '@utils/variable';
@import '@utils/common';

input:checked ~ .main-button {
  display: none;
}

input:not(:checked) ~ form {
  display: none;
}

.main-wrapper {
  @include flex-column;
  width: 100vw;
  height: 100vh;
  align-items: center;
  justify-content: flex-end;
  margin: auto;
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('@resources/duxit.jpg');
  background-position: center top;
  background-size: cover;
}

.button-wrapper {
  @include flex-column;
  align-items: center;
  margin-bottom: 4em;
  .main-button {
    @include button;
    width: 22em;
    padding: 1em;
    margin: 1em;
    background-color: $main-color;
    cursor: pointer;
  }
}

.code-form {
  text-align: center;
  > div {
    display: flex;
    align-items: center;
  }
  .code-input {
    width: 16em;
    padding: 1em 2em;
    border: 0;
    background-color: $white-color;
    border-radius: $medium-radius;
    box-shadow: $button-shadow;
    text-align: left;
  }
  .enter {
    width: 6em;
  }
  .error {
    display: none;
    padding: 0.5em;
    margin: 0 auto;
    color: $red-color;
  }
}
