/*== ShyFox Contents ================================================================================================================================

Styles for some other things stylable in userContent.css

/* extensions popups rounding */
@-moz-document url-prefix("moz-extension:"){
  body {border-radius: var(--big-rounding) !important;}
}

/* screenshots */

#screenshots-component{
  button {border-radius: var(--rounding) !important;}
  #buttons-container {border-radius: var(--big-rounding) !important;}

  .screenshots-button {
    --in-content-primary-button-background: var(--shy-color) !important;
    --in-content-primary-button-background-hover: color-mix(in oklab, var(--in-content-primary-button-background), white 10%) !important;
    --in-content-primary-button-background-active: color-mix(in oklab, var(--in-content-primary-button-background), white 20%) !important;
    --in-content-focus-outline-color: var(--shy-color) !important;
  }
}

/* simple translate icon */
@media (-moz-bool-pref: "shyfox.enable.ext.mono.context.icons") {
  .simple-translate-button {
    background-image: none !important;
    &::before {
      content: "";
      position: absolute;
      
      background-color: var(--simple-translate-main-text);
      mask-image: url("../../icons/translate.svg");
      mask-repeat: no-repeat;
      mask-position: center;
      
      width: inherit !important;
      height: inherit !important;
    }
  }
}

/* simple translate */
.simple-translate-panel{
  border-radius: var(--big-rounding) !important;
  border: 1px solid color-mix(in srgb, var(--simple-translate-main-bg) 90%, var(--simple-translate-main-text)) !important;
}

.simple-translate-button{
  border-radius: 7px !important;
  border: 1px solid color-mix(in srgb, var(--simple-translate-main-bg) 65%, var(--simple-translate-main-text)) !important;
}

/* Adaptive Tab Bar Color settings accent */
@-moz-document url("moz-extension://d6e33c37-61b0-488f-9899-bf896d64db63/options.html"){
  * {
    --color-link: var(--shy-color) !important;
    --color-accent: var(--shy-color) !important;
    --color-link-hover: color-mix(in srgb, var(--shy-color) 60%, var(--color)) !important;
    --color-link-active: color-mix(in srgb, var(--shy-color) 30%, var(--color)) !important;
  }
}