@use "sass:color";
@use "core/functions" as *;
@use "core/mixins" as *;
@use "override" as *;

.fixit-decryptor-container {
  font-family: fi-var(global-font-family);
  text-align: center;
  margin-block: fi-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: fi-var(global-font-color);
    border: 1px solid fi-var(global-border-color);
    box-shadow: 0px 0px 5px 0px fi-var(global-border-color);
    @include border-radius;
    transition: all 0.1s ease-out;

    &:active,
    &:focus,
    &:hover {
      color: light-dark(color.adjust($global-link-hover-color, $lightness: -6%), color.adjust($global-link-hover-color-dark, $lightness: 6%));
      border-color: fi-var(global-link-hover-color);
      box-shadow: 0px 0px 5px 0px light-dark(
        color.adjust($global-link-hover-color, $lightness: 20%),
        color.adjust($global-link-hover-color-dark, $lightness: -20%)
      );
    }
  }

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

  .fixit-decryptor-btn,
  .fixit-encryptor-btn {
    cursor: pointer;
    padding: 0.8rem 1rem;
    background-color: fi-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-fi-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-fi-var(decryptor-margin-block, 1rem);
  }
  &.decrypted > .fixit-decryptor-container {
    display: none;
  }
}

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