/* Main CSS variables applied when selecting relevant options */

/* :root can be found in common.css */

body {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  /*filter: saturate(var(--current-saturation)) contrast(var(--current-contrast)) invert(var(--current-invert));*/
}

/* CSS for accessibility_settings page */

.accessibility_menu {
  display: flex;
  justify-content: center;
  margin-top: var(--margin-top, 20px);
}

.accessibility_open {
  height: fit-content;
  max-width: 55em;
  position: relative;
  background-color: var(--main-colour, #FF8C00);
  border-radius: var(--border-radius, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--box-shadow-outer, rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 2px 6px 2px);
  padding: var(--padding, 10px);
}

.accessibility_open.active {
  left:0;
  transition: transform 0.3s ease-in-out;
  transform: translateX(0);
}

.accessibility_heading {
  color: var(--text-colour, #FFFFFF);
  margin-top: var(--margin-top, 20px);
  margin-bottom: var(--margin-bottom, 20px);
  font-size: var(--current-font-size, 24px);
  font-weight: var(--font-bold, 700);
}

.accessibility_options {
  color: var(--text-colour, #FFFFFF);
  background-color: var(--white-background, #FFFFFF);
  border-radius: var(--border-radius, 10px);
  border: var(--border, 2px solid #000);
  height: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--padding, 10px);
  margin: var(--margin, 20px);
}

.accessibility_section {
  width: 90%;
  padding-bottom: var(--padding-bottom, 10px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-weight: var(--font-bold, 700);
}

.accessibility_title {
  color: var(--current-text-colour);
  text-align: center;
  margin-bottom: var(--margin-bottom, 20px);
  display: flex;
  justify-content: center;
}

.accessibility_button_section {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(3, 1fr);
}

.size_button_section {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--secondary-text-colour);
}

.size_button {
  border: var(--border, 2px solid #000);
  background-color: var(--white-background);
  box-shadow: var(--box-shadow-outer, rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 2px 6px 2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.1s ease;
  width: 175px;
  height: auto;
  border-radius: var(--border-radius, 10px);
  padding: var(--padding, 10px);
  margin: 15px;
  word-wrap: anywhere;
  color: var(--current-text-colour);

}

.size_button:active {
  box-shadow: var(--box-shadow-inset, inset rgba(60, 64, 67, 0.3) 0 1px 2px 0, inset rgba(60, 64, 67, 0.15) 0 2px 6px 2px);
  transform: scale(0.95);
}

.button_text {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
}

.accessibility_svg_button {
  Margin: var(--margin, 20px);
}

#sizing_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}

#spacing_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}

#word_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}

#line_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}

#saturation_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}
#contrast_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}
#invert_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}

#text_colour_description {
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  color: var(--current-text-colour);
  word-spacing: var(--current-word-spacing);
  font-weight: var(--font-bold, 700);
}

.accessibility_buttons_title {
  margin: var(--margin, 20px);
  border-bottom: var(--border, 2px solid #000);
}

.accessibility_reset_save {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#accessibility_reset_button {
  border: var(--border, 2px solid #000);
  background-color: var(--white-background);
  box-shadow: var(--box-shadow-outer,rgba(60, 64, 67, 0.3) 0 1px 2px 0, rgba(60, 64, 67, 0.15) 0 2px 6px 2px);
  display: flex;
  flex-direction: column;
  color: var(--current-text-colour);
  align-items: center;
  transition: transform 0.1s ease;
  padding-top: var(--padding-top, 10px);
  padding-bottom: var(--padding-bottom, 10px);
  width: 175px;
  margin-top: var(--margin-top, 20px);
  border-radius: var(--border-radius, 10px);
  font-size: var(--current-font-size);
  letter-spacing: var(--current-letter-spacing);
  line-height: var(--current-line-spacing);
  word-spacing: var(--current-word-spacing);
}

#accessibility_reset_button:active {
  box-shadow: var(--box-shadow-inset, inset rgba(60, 64, 67, 0.3) 0 1px 2px 0, inset rgba(60, 64, 67, 0.15) 0 2px 6px 2px);
  transform: scale(0.95);
}

/* This class is applied to all text that has no background, so that when invert is applied, the text is readable */

.no-filter {
  background: var(--white-background, #FFF);
}

/* Styling for the accessible icon */

.accessibility_person {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 113px;
  right: 40px;
  left: unset;
  z-index: 999;
  width: 20px;
  height: auto;
}

.accessibility_button img {
  width: 54px;
}

.accessible_button_link {
  display: flex;
  align-items: center;
}

.accessibility_button {
  width: 70px;
  height: 70px;
  z-index: 999;
  display: flex;
  border: var(--border, 2px solid #000);
  border-radius: 50%;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  background-color: var(--white-background, #FFFFFF);
  box-shadow: rgba(0, 0, 0, 0.25) 0 14px 28px, rgba(0, 0, 0, 0.22) 0 10px 10px;
}

.accessibility_button:active {
  box-shadow: var(--box-shadow-inset, inset rgba(60, 64, 67, 0.3) 0 1px 2px 0, inset rgba(60, 64, 67, 0.15) 0 2px 6px 2px);
  transform: scale(0.95);
}

/* Media Queries */

@media (min-width: 1420px) {
  .size_button {
    width: 220px;
  }
}

@media (max-width: 1189px) {
  .accessibility_button_section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1023px) {
  .accessibility_person {
    bottom: 69px;
  }
}

@media (max-width: 682px) {
  .accessibility_button_section {
    flex-direction: column;
    display: flex;
    width: 100%;
  }

  .size_button_section {
    flex-direction: column;
    display: flex;
    width: 100%;
  }

  .size_button {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 5px;
  }

  .size_button svg {
    display: none;
  }

  .button_text {
    font-weight: var(--font-bold, 700);

  }
}