@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-direction: 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(--card-shadow);

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

  @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 {
  margin-bottom: 20px;
  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);
    padding: 0 1.5rem;
    border: 2px solid var(--theme-color);
    border-radius: 0.5rem;

    background: var(--bg-color) !important;
    color: var(--black) !important;
    outline: none;

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

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

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

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

    vertical-align: text-bottom;

    width: 0;
    margin-inline-end: 18px;

    cursor: pointer;

    &::after {
      content: " ";

      position: absolute;
      top: 0;

      display: inline-block;

      box-sizing: border-box;

      width: 14px;
      height: 14px;
      padding-inline-start: 0;
      border: 1px solid #ddd;
      border-radius: 50%;

      background: #fff;

      text-align: center;

      visibility: visible;

      transition: background var(--color-transition),
        border-color var(--color-transition);

      // stylelint-disable max-nesting-depth
      #{hope-config.$dark-selector} & {
        border-color: #666;
        background: #333;
      }
      // stylelint-enable max-nesting-depth
    }

    &:checked {
      // stylelint-disable max-nesting-depth
      &::after {
        content: "";
        border-color: var(--theme-color);
        background: var(--theme-color);

        #{hope-config.$dark-selector} & {
          border-color: var(--theme-color);
          background: var(--theme-color);
        }
      }

      &::before {
        content: "";

        position: absolute;
        top: 2px;

        // NOTE: Compatible with Android Wechat
        // inset-inline-start: 5px;
        left: 5px;
        z-index: 1;

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

        transform: rotate(45deg);

        #{hope-config.$rtl-selector} & {
          right: unset;
          left: 5px;
        }
      }
      // stylelint-enable max-nesting-depth
    }
  }
}

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

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

  background: var(--theme-color);
  color: var(--bg-color);
  outline: none;

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

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

  &:hover {
    background: var(--theme-color-light);
  }
}