@charset "utf-8";
/**
 * CSS of PWE a11y module
 * 
 * @package      PWE a11y
 * @type         CSS
 * @author       ProWebExts (Piotr Adamiec)
 * @copyright    Copyright (C) 2023 ProWebExts. All rights reserved.
 * @License      GNU General Public License version 3 or later
 */


/* ----- Properties */
.pwe-a11y-font-size-1 { font-size: 110%; }
.pwe-a11y-font-size-2 { font-size: 120%; }
.pwe-a11y-font-size-3 { font-size: 130%; }
.pwe-a11y-font-size-4 { font-size: 140%; }
.pwe-a11y-font-size-5 { font-size: 150% !important; }

.pwe-a11y-line-height-1 { line-height: 1.4em; }
.pwe-a11y-line-height-2 { line-height: 1.7em; }
.pwe-a11y-line-height-3 { line-height: 2em; }

.pwe-a11y-letter-spacing-1 { letter-spacing: .1em; }
.pwe-a11y-letter-spacing-2 { letter-spacing: .2em; }
.pwe-a11y-letter-spacing-3 { letter-spacing: .3em; }
 
.pwe-a11y-readable-font {
  font-family: Verdana, sans-serif;
  font-weight: 400;
}
.pwe-a11y-highlight-links a {
  background-color: #ffff00;
  text-decoration: underline;
}
.pwe-a11y-highlight-links button {
  background-color: #ffff00;
  text-decoration: underline;
}

.pwe-a11y-highlight-headers h1,
.pwe-a11y-highlight-headers h2,
.pwe-a11y-highlight-headers h3,
.pwe-a11y-highlight-headers h4,
.pwe-a11y-highlight-headers h5,
.pwe-a11y-highlight-headers h6 {
  color: #000000;
  background-color: #ffff00;
}

.pwe-a11y-monochromat {
  filter: grayscale(1);
}

.pwe-a11y-sepia {
  filter: sepia(1);
}

.pwe-a11y-large-cursor {
  cursor: url('../images/mouse-pointer.cur'), auto;
}
.pwe-a11y-large-cursor a,
.pwe-a11y-large-cursor button,
.pwe-a11y-large-cursor input[type="submit"],
.pwe-a11y-large-cursor input[type="reset"] {
  cursor: url('../images/mouse-hand.cur'), pointer;
}

/* ----- Buttons */
.pwe-a11y-btns {
  margin: 10px 0;
}

.pwe-a11y-btn,
.pwe-a11y-btns > button {
  position: relative;
  width: 34px;
  height: 34px;
  font-size: .9rem;
  text-align: center;
  vertical-align: middle;
  border: none;
  padding: 0;
  color: #000000 !important;
  background-color: #E7E7E7;
}
.pwe-a11y-btn:hover, .pwe-a11y-btn:active, .pwe-a11y-btn:focus,
.pwe-a11y-btns > button:hover, .pwe-a11y-btns > button:active, .pwe-a11y-btns > button:focus {
  background-color: #DADADA;
}

/* --- Align */
.pwe-a11y-btns-left {
  text-align: left;
}
.pwe-a11y-btns-left > button {
  margin-right: 6px;
}
.pwe-a11y-btns-center {
  text-align: center;
}
.pwe-a11y-btns-center > button {
  margin: auto 3px;
}
.pwe-a11y-btns-right {
  text-align: right;
}
.pwe-a11y-btns-right > button {
  margin-left: 6px;
}

/* --- Contrast buttons */
.pwe-a11y-btn-ct-top,
.pwe-a11y-btn-ct-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.pwe-a11y-btn-ct-top {
  z-index: 2;
  clip-path: inset(0 0 50% 0);
}
.pwe-a11y-btn-ct-bottom {
  z-index: 1;
  clip-path: inset(50% 0 0 0);
}
.pwe-a11y-btn-ct-0 .pwe-a11y-btn-ct-top {
  background-color: #000000;
}
.pwe-a11y-btn-ct-0 .pwe-a11y-btn-ct-bottom {
  border: solid 1px #DADADA;
  background-color: #ffffff;
}
.pwe-a11y-btn-ct-1 .pwe-a11y-btn-ct-top {
  border: solid 1px #DADADA;
  background-color: #ffffff;
}
.pwe-a11y-btn-ct-1 .pwe-a11y-btn-ct-bottom {
  background-color: #252930;
}
.pwe-a11y-btn-ct-2 .pwe-a11y-btn-ct-top {
  border: solid 1px #DADADA;
  background-color: #ffff00;
}
.pwe-a11y-btn-ct-2 .pwe-a11y-btn-ct-bottom {
  background-color: #000000;
}