@use "vuepress-shared/styles/reset";

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(-9px);
  }

  20% {
    transform: translateX(8px);
  }

  30% {
    transform: translateX(-7px);
  }

  40% {
    transform: translateX(6px);
  }

  50% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(4px);
  }

  70% {
    transform: translateX(-3px);
  }

  80% {
    transform: translateX(2px);
  }

  90% {
    transform: translateX(-1px);
  }
}

.vp-decrypt-layer {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;

  height: calc(80vh - var(--navbar-height));
  margin-top: var(--navbar-height);

  text-align: center;

  &.expand {
    margin-top: 0;
  }
}

.vp-decrypt-modal {
  width: calc(100% - 8rem);
  max-width: 420px;
  margin: 2rem;
  padding: 2rem;
  border-radius: 1.5rem;

  box-shadow: 2px 2px 10px 6px var(--vp-c-shadow);

  transition: box-shadow var(--vp-t-color);

  @media (max-width: hope-config.$tablet) {
    width: calc(100% - 5rem);
    padding: 1.5rem;
  }

  @media (max-width: hope-config.$mobile) {
    width: calc(100% - 3rem);
    box-shadow: none;
  }
}

.vp-decrypt-hint {
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 2;

  &.tried {
    color: #f00;

    animation-name: shake;
    animation-duration: 0.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
  }

  svg {
    width: 1.25em;
    height: 1.25em;
  }
}

.vp-decrypt-input {
  input {
    width: calc(100% - 3rem);
    margin-top: 1.25rem;
    padding: 0 1.5rem;
    border: 2px solid var(--vp-c-accent-bg);
    border-radius: 0.5rem;

    background: var(--vp-c-bg) !important;
    color: var(--vp-c-text) !important;
    outline: none;

    font-size: 1rem;
    line-height: 2;

    transition:
      background var(--vp-t-color),
      color var(--vp-t-color);
  }
}

.vp-remember-password {
  margin-top: 0.5rem;
  color: var(--vp-c-text-mute);
  font-size: 14px;
  text-align: start;

  input[type="checkbox"] {
    position: relative;

    vertical-align: text-bottom;

    height: 1em;
    margin-inline-end: 18px;

    cursor: pointer;

    appearance: none;

    &::after {
      content: " ";

      position: absolute;
      top: 0;

      display: inline-block;

      box-sizing: border-box;
      width: 14px;
      height: 14px;
      padding-inline-start: 0;
      border: 1px solid var(--vp-c-border);
      border-radius: 50%;

      background: var(--vp-c-control);

      text-align: center;

      visibility: visible;
    }

    &:checked {
      &::after {
        content: "";
        border-color: var(--vp-c-accent-bg);
        background: var(--vp-c-accent-bg);
      }

      &::before {
        content: "";

        position: absolute;
        inset-inline-start: 5px;
        top: 2px;
        z-index: 1;

        width: 2px;
        height: 6px;
        border: solid var(--vp-c-white);
        border-width: 0 2px 2px 0;

        transform: rotate(45deg);
      }
    }
  }

  label {
    display: inline-block;
  }
}

.vp-decrypt-submit {
  @include reset.button;

  width: 70px;
  margin-top: 1.5rem;
  border-width: 0;
  border-radius: 0.5rem;

  background: var(--vp-c-accent-bg);
  color: var(--vp-c-text);
  outline: none;

  font-size: 1.2rem;
  line-height: 2;

  transition: color var(--vp-t-color);

  &:hover {
    background: var(--vp-c-accent-hover);
  }
}