/*
  format.css
  Version 1.0, 11th October 2024
*/

@import url("./psdi-common.css");

/* Special handling for dark mode - we override the color specifications to match light mode here, and store the
values for dark mode in variables that we can reference when we want to retrieve them
*/
[data-theme='dark'] {

  /* In dark mode, store the same value as in light mode - the variable values will be overridden to enact the toggle */
  --ifm-background-color: var(--psdi-bg-color-default);

  --ifm-color-primary           : var(--psdi-color-primary);
  --ifm-color-primary-dark      : var(--psdi-color-primary-dark);
  --ifm-color-primary-darker    : var(--psdi-color-primary-darker);
  --ifm-color-primary-darkest   : var(--psdi-color-primary-darkest);
  --ifm-color-primary-light     : var(--psdi-color-primary-light);
  --ifm-color-primary-lighter   : var(--psdi-color-primary-lighter);
  --ifm-color-primary-lightest  : var(--psdi-color-primary-lightest);
  --ifm-color-primary-lightestp1: var(--psdi-color-primary-lightestp1);
  --ifm-color-primary-lightestp2: var(--psdi-color-primary-lightestp2);

  --ifm-color-secondary         : var(--psdi-bg-color-secondary);
  --ifm-color-secondary-light   : var(--psdi-bg-color-secondary-light);
  --ifm-color-secondary-lighter : var(--psdi-bg-color-secondary-lighter);
  --ifm-color-secondary-lightest: var(--psdi-bg-color-secondary-lightest);
  --ifm-color-secondary-dark    : var(--psdi-bg-color-secondary-dark);
  --ifm-color-secondary-darker  : var(--psdi-bg-color-secondary-darker);
  --ifm-color-secondary-darkest : var(--psdi-bg-color-secondary-darkest);

  --ifm-background-color-secondary         : var(--psdi-bg-color-secondary);
  --ifm-background-color-secondary-light   : var(--psdi-bg-color-secondary-light);
  --ifm-background-color-secondary-lighter : var(--psdi-bg-color-secondary-lighter);
  --ifm-background-color-secondary-lightest: var(--psdi-bg-color-secondary-lightest);
  --ifm-background-color-secondary-dark    : var(--psdi-bg-color-secondary-dark);
  --ifm-background-color-secondary-darker  : var(--psdi-bg-color-secondary-darker);
  --ifm-background-color-secondary-darkest : var(--psdi-bg-color-secondary-darkest);

  --ifm-font-color-base   : var(--psdi-dark-text-color-body);
  --ifm-font-color-base-f1: var(--psdi-dark-text-color-body-f1);
  --ifm-font-color-base-f2: var(--psdi-dark-text-color-body-f2);
  --ifm-font-color-base-f3: var(--psdi-dark-text-color-body-f3);

  --ifm-hero-text-color   : var(--psdi-light-text-color-body);
  --ifm-hero-text-color-f1: var(--psdi-light-text-color-body-f1);
  --ifm-hero-text-color-f2: var(--psdi-light-text-color-body-f2);
  --ifm-hero-text-color-f3: var(--psdi-light-text-color-body-f3);

  --ifm-font-color-primary   : var(--psdi-light-text-color-body);
  --ifm-font-color-primary-f1: var(--psdi-light-text-color-body-f1);
  --ifm-font-color-primary-f2: var(--psdi-light-text-color-body-f2);
  --ifm-font-color-primary-f3: var(--psdi-light-text-color-body-f3);

  --ifm-heading-color   : var(--psdi-dark-text-color-heading);
  --ifm-heading-color-f1: var(--psdi-dark-text-color-heading-f1);
  --ifm-heading-color-f2: var(--psdi-dark-text-color-heading-f2);
  --ifm-heading-color-f3: var(--psdi-dark-text-color-heading-f3);

  --ifm-hero-heading-color   : var(--psdi-light-text-color-heading);
  --ifm-hero-heading-color-f1: var(--psdi-light-text-color-heading-f1);
  --ifm-hero-heading-color-f2: var(--psdi-light-text-color-heading-f2);
  --ifm-hero-heading-color-f3: var(--psdi-light-text-color-heading-f3);

  --ifm-font-color-secondary   : var(--psdi-dark-text-color-body);
  --ifm-font-color-secondary-f1: var(--psdi-dark-text-color-body-f1);
  --ifm-font-color-secondary-f2: var(--psdi-dark-text-color-body-f2);
  --ifm-font-color-secondary-f3: var(--psdi-dark-text-color-body-f3);

  --ifm-heading-color-secondary   : var(--psdi-dark-text-color-heading);
  --ifm-heading-color-secondary-f1: var(--psdi-dark-text-color-heading-f1);
  --ifm-heading-color-secondary-f2: var(--psdi-dark-text-color-heading-f2);
  --ifm-heading-color-secondary-f3: var(--psdi-dark-text-color-heading-f3);
}

/* Forms inherit style from normal content, and make sure content is well away from the edges */
form {
  width      : 95%;
  min-width  : 320px;
  padding-top: 1rem;
  align-self : center;
}

/* Padding for link to converter website. */
#visit {
  padding-left: 0.125rem;
}

/* Width management for select boxes and forms */

.med-width {
  width    : 100%;
  max-width: 25rem;
}

.large-width {
  width    : 100%;
  max-width: 50rem;
}

/* Placeholder text in input should be halfway faded between text color and background */
input::placeholder {
  color     : color-mix(in srgb, var(--ifm-font-color-base) 50%, var(--ifm-background-color) 50%);
  font-style: italic;
}

/* Invalid input fields switch to alternate background */

input:invalid {
  background-color: var(--ifm-color-primary);
  color           : var(--ifm-hero-text-color);
}

/* Dotted underline to indicate text that will show a tooltip on mouseover */
.mouseover {
  text-decoration: underline dotted;
}

/* Style the popup tooltips */
.tooltip {
  --bs-tooltip-opacity: 1;
}

.tooltip-on-light {
  --bs-tooltip-bg   : var(--ifm-color-primary);
  --bs-tooltip-color: var(--psdi-light-text-color-body);
}

.tooltip-on-dark {
  --bs-tooltip-bg   : var(--ifm-background-color);
  --bs-tooltip-color: var(--psdi-dark-text-color-body);
}

/* Converter details, user input and file conversion initially not displayed. */
.init-hidden,
.hidden {
  display: none
}

/* For elements that should only be displayed on mobile devices */
.mobile-only {
  display: none;
}

@media (pointer:none),
(pointer:coarse) {
  .mobile-only {
    display: block;
  }
}

/* File upload prompt */
input#fileToUpload {
  margin-right: 0.25rem;
}

/* Buttons that are initially disabled */
input.button.init-disabled {
  background-color: var(--ifm-color-secondary);
  color           : gray
}

/* Custom button shading to work with accessibility settings */
:is(input.button, input[type="button"]):not(.clean-btn):hover,
:is(input.button, input[type="button"]):not(.clean-btn):focus {
  background-color: color-mix(in srgb, var(--ifm-color-primary) 90%, var(--ifm-hero-text-color) 10%);
}

:is(input.button, input[type="button"]):not(.clean-btn):active {
  background-color: color-mix(in srgb, var(--ifm-color-primary) 80%, var(--ifm-hero-text-color) 20%);
}

/* Small vertical space. */
.smallGap {
  padding: 0.125rem;
}

/* Medium vertical space. */
.medGap {
  padding: 1rem;
}

/* Large vertical space. */
.largeGap {
  padding: 8rem;
}

/* Flex styling for pages */
.flex-panel-display {
  display        : flex;
  flex-direction : row;
  align-items    : flex-start;
  justify-content: space-between;
}

.flex-panel-display:has(.instructions-panel) {
  border       : 1px solid var(--psdi-border-color-dark);
  border-radius: 1rem;
  margin-bottom: 2rem;
}

[data-theme='dark'] .flex-panel-display:has(.instructions-panel) {
  border: 1px solid var(--psdi-border-color-light);
}

@media (max-width: 700px) {
  .flex-panel-display {
    display: block;
  }
}

.flex-panel {
  flex   : 1 1 50%;
  padding: 1rem;
}

.instructions-panel {
  flex  : 1 1 35%;
  margin: 0;
}

.flex-panel-display hr {
  margin             : -0.5rem 25% 0.5rem 25%;
  height             : 1px;
  border-top-style   : none;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}

/* Control for elements to only appear on big/small screens */
.big-screen-only {
  display: block;
}

.small-screen-only {
  display: none;
}

@media (max-width: 700px) {

  .big-screen-only {
    display: none;
  }

  .small-screen-only {
    display: block;
  }
}

/* Grid for textarea label/elements. */
.access-options {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  column-gap           : 2rem;
}

.access-option-container {
  padding-left   : 0 1rem 0 1rem;
  display        : flex;
  flex-direction : column;
  justify-content: flex-end;
}

.access-lm,
.access-dm {
  display: none;
}

[data-theme="light"] .access-nm {
  display: none;
}

[data-theme="light"] .access-lm {
  display: block;
}

[data-theme="dark"] .access-nm {
  display: none;
}

[data-theme="dark"] .access-dm {
  display: block;
}

/* Select boxes for accessibility options */
.access-option-container select {
  min-width: 5rem;
  width    : 100%;
}

.access-option-container select option:checked {
  background-color: var(--ifm-background-color);
  color           : var(--ifm-font-color-base);
}

select#light-colour,
select#dark-background,
select#light-colour option,
select#dark-background option,
select#light-colour option:checked,
select#dark-background option:checked {
  background-color: var(--ifm-color-primary);
  color           : var(--ifm-hero-text-color);
}

select#size option {
  font-size: var(--default-font-size);
}

select#font option {
  font-family: var(--default-font);
}

select#dark-colour option {
  color: var(--default-dark-text-color-body);
}

select#light-colour option {
  background-color: var(--ifm-color-primary);
  color           : var(--default-light-text-color-body);
}

select#light-background option {
  background-color: var(--default-background-color);
}

select#dark-background option {
  background-color: var(--default-color-primary);
  color           : var(--psdi-light-text-color-body);
}

/* Classes to force specific styling for exceptional cases */
.no-left-margin {
  margin-left: 0 !important;
}

/* Convert button and loading spinner */
.convert-button-and-spinner {
  display       : flex;
  flex-direction: row;
  align-items   : center;
}

.loading-spinner {
  display: none;
  color  : var(--ifm-color-primary);
  scale  : 75%;
}