.fixit-decryptor-container {
  font-family: fixit-var(global-font-family);
  text-align: center;
  margin-block: fixit-var(decryptor-margin-block);

  .fixit-decryptor-loading {
    vertical-align: middle;
  }

  .fixit-decryptor-input,
  .fixit-decryptor-btn,
  .fixit-encryptor-btn {
    display: none;
    box-sizing: border-box;
    outline: none;
    color: fixit-var(global-font-color);
    border: 1px solid fixit-var(global-border-color);
    box-shadow: 0px 0px 5px 0px fixit-var(global-border-color);
    @include border-radius;
    transition: all 0.1s ease-out;

    &:active,
    &:focus,
    &:hover {
      color: darken($global-link-hover-color, 6%);
      border-color: fixit-var(global-link-hover-color);
      box-shadow: 0px 0px 5px 0px lighten($global-link-hover-color, 20%);

      [data-theme=dark] & {
        color: lighten($global-link-hover-color-dark, 6%);
        box-shadow: 0px 0px 5px 0px darken($global-link-hover-color-dark, 20%);
      }
    }
  }

  .fixit-decryptor-input {
    width: calc(clamp(50%, 450px, 100%) - 100px);
    height: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: fixit-var(global-background-color);
  }

  .fixit-decryptor-btn,
  .fixit-encryptor-btn {
    cursor: pointer;
    padding: 0.8rem 1rem;
    background-color: fixit-var(global-background-color);
    transition: all 0.1s ease-out;
  }

  .fixit-encryptor-btn {
    display: none;
  }
}

fixit-encryptor {
  &.initialized > .fixit-decryptor-container {
    .fixit-decryptor-input,
    .fixit-decryptor-btn {
      display: inline-block;
    }

    .fixit-decryptor-loading {
      display: none;
    }
  }

  cipher-text {
    display: none !important;
  }
}

// fixit-encryptor for for the encrypted pages
article fixit-encryptor {
  .fixit-decryptor-container {
    @include set-fixit-var(decryptor-margin-block, 2rem);
  }
  &.decrypted > .fixit-decryptor-container {
    .fixit-decryptor-loading,
    .fixit-decryptor-input,
    .fixit-decryptor-btn {
      display: none;
    }

    .fixit-encryptor-btn {
      display: inline-block;
    }
  }
}

// fixit-encryptor shortcodes
#content fixit-encryptor {
  .fixit-decryptor-container {
    @include set-fixit-var(decryptor-margin-block, 1rem);
  }
  &.decrypted > .fixit-decryptor-container {
    display: none;
  }
}

.encrypted-hidden {
  display: none !important;
}