/* ----------------------------------------
 * Input Elements
 * ----------------------------------------
 */

/* ------- SHARED BETWEEN ELEMENTS -------- */

input:not([type]),
input[type=date],
input[type=datetime-local],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
input[type=button],
input[type=color],
input[type=reset],
input[type=submit],
textarea,
button,
select {
  /* Disable default rendering */
  appearance: none;

  margin: 2px;
  padding: 3px 6px;
  border: 1px solid var(--thinlinc-lightgrey);
  border-radius: var(--small-border-radius);
  color: black;
  background: white;
  font-family: Verdana, sans-serif; /* Match Bugzilla's input font */
  font-size: small; /* Match Bugzilla's input font-size */
}

/* ------- BUTTONS -------- */

button,
input[type=button],
input[type=color],
input[type=reset],
input[type=submit] {
  padding-left: 20px;
  padding-right: 20px;
}

/* -- SHARED BETWEEN CHECKBOXES & RADIOBUTTONS -- */

input[type=radio],
input[type=checkbox] {
  padding: 0.5em 1en;
  border-radius: var(--small-border-radius);
  appearance: none;
  outline: none;
  line-height: var(--line-height);

  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--thinlinc-lightgrey);
  /* Disable Chrome's touch tap highlight to avoid conflicts with overlay */
  -webkit-tap-highlight-color: transparent;
  width: 16px;
  --checkradio-height: 16px;
  height: var(--checkradio-height);
  padding: 0;
  margin: 0 6px;
  /* Don't have transitions for outline in order to be consistent
     with other elements */
  transition: all 0.2s, outline-color 0s, outline-offset 0s;

  /* A transparent outline in order to work around a graphical clipping issue
     in WebKit. See bug: https://bugs.webkit.org/show_bug.cgi?id=256003 */
  outline: var(--border-width) solid transparent;
  position: relative; /* Since ::before & ::after are absolute positioned */

  /* We want to align with the middle of capital letters, this requires
     a workaround. The default behavior is to align the bottom of the element
     on top of the text baseline, this is too far up.
     We want to push the element down half the difference in height between
     it and a capital X. In our Poppins font, the height of a capital "X" is
     0.698em. */
  vertical-align: calc(0px - (var(--checkradio-height) - 0.698em) / 2);
  /* FIXME: Could write 1cap instead of 0.698em, but it's only supported in
            Firefox as of 2023 */
  /* FIXME: We probably want to use round() here, see bug 8148 */
}
input[type=radio]:focus-visible,
input[type=checkbox]:focus-visible {
  outline-color: var(--thinlinc-darkblue);
}
input[type=radio]:hover,
input[type=checkbox]:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.08),
                    100%, transparent);
}
input[type=checkbox]::before,
input[type=checkbox]::after,
input[type=radio]::before,
input[type=radio]::after {
  content: "";
  display: block; /* width & height doesn't work on inline elements */
  transition: inherit;
  /* Let's prevent the pseudo-elements from taking up layout space so that
     the ::before and ::after pseudo-elements can be in the same place. This
     is also required for vertical-align: baseline to work like we want it to
     on radio/checkboxes. If the pseudo-elements take up layout space, the
     baseline of text inside them will be used instead. */
  position: absolute;
}
input[type=checkbox]::after,
input[type=radio]::after {
  width: 10px;
  height: 2px;
  background-color: transparent;
  border-radius: 2px;
}

/* ------- CHECKBOXES ------- */

input[type=checkbox] {
  border-radius: 4px;
}
input[type=checkbox]:checked,
input[type=checkbox]:indeterminate {
  background-color: var(--thinlinc-darkblue);
}
input[type=checkbox]:checked:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0.40),
                    100%, transparent);
  background-blend-mode: overlay;
}
input[type=checkbox]::before {
  width: 25%;
  height: 55%;
  border-style: solid;
  border-color: transparent;
  border-width: 0 2px 2px 0;
  border-radius: 1px;
  transform: translateY(-1px) rotate(35deg);
}
input[type=checkbox]:checked::before {
  border-color: white;
}
input[type=checkbox]:indeterminate::after {
  background-color: white;
}

/* ------- RADIO BUTTONS ------- */

input[type=radio] {
  border-radius: 50%;
  border: 1px solid transparent; /* To ensure a smooth transition */
}
input[type=radio]:checked {
  border: 4px solid var(--thinlinc-darkblue);
  background-color: white;
  /* background-image should be removed from the radio element to not
     interfere with the background-image that is set on the ::before
     element. */
  background-image: none;
}
input[type=radio]::before {
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 0;
}
input[type=radio]:checked::before {
  opacity: 1;
}
input[type=radio]:indeterminate::after {
  background-color: black;
}
input[type=radio]::before:hover {
  /* We can achieve the highlight overlay effect on border colors by
     setting button-activation-overlay-light on an element that stays
     on top (z-axis) of the element with a border. */
  background-image: linear-gradient(rgba(255, 255, 255, 0.23),
                    100%, transparent);
  mix-blend-mode: overlay;
}

/* ------- SELECT ------- */

select[size]:not([size="1"]), select[multiple] {
  padding: 0;
}
option {
  color: black;
  background: white;
  padding: 3px 6px;
}
/* Highlight checked options in multi-select lists */
option:checked {
  background-color: var(--thinlinc-darkblue);
  color: white;
}

/* ------- FOCUS-VISIBLE ------- */

button:focus-visible,
input:not([type]):focus-visible,
input[type=button]:focus-visible,
input[type=color]:focus-visible,
input[type=date]:focus-visible,
input[type=datetime-local]:focus-visible,
input[type=email]:focus-visible,
input[type=month]:focus-visible,
input[type=number]:focus-visible,
input[type=password]:focus-visible,
input[type=reset]:focus-visible,
input[type=search]:focus-visible,
input[type=submit]:focus-visible,
input[type=tel]:focus-visible,
input[type=text]:focus-visible,
input[type=time]:focus-visible,
input[type=url]:focus-visible,
input[type=week]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--border-width) solid var(--thinlinc-darkblue);
  outline-offset: -1px;
}

button::-moz-focus-inner,
input[type=button]::-moz-focus-inner,
input[type=color]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner {
  border: none;
}

/* ------- DISABLED ------- */

button:disabled,
input:not([type]):disabled,
input[type=button]:disabled,
input[type=color]:disabled,
input[type=date]:disabled,
input[type=datetime-local]:disabled,
input[type=email]:disabled,
input[type=month]:disabled,
input[type=number]:disabled,
input[type=password]:disabled,
input[type=reset]:disabled,
input[type=search]:disabled,
input[type=submit]:disabled,
input[type=tel]:disabled,
input[type=text]:disabled,
input[type=time]:disabled,
input[type=url]:disabled,
input[type=week]:disabled,
select:disabled,
textarea:disabled {
  color: rgb(128, 128, 128);
  background: rgb(240, 240, 240);
}

/* ------- HOVER ------- */

button:hover:not(:disabled),
input[type=button]:hover:not(:disabled),
input[type=color]:hover:not(:disabled),
input[type=reset]:hover:not(:disabled),
input[type=submit]:hover:not(:disabled),
select:hover:not(:disabled) {
  background: var(--thinlinc-lightgrey-25);
}

/* ------- ACTIVE ------- */

button:active:not(:disabled),
input[type=button]:active:not(:disabled),
input[type=color]:active:not(:disabled),
input[type=reset]:active:not(:disabled),
input[type=submit]:active:not(:disabled),
select:active:not(:disabled) {
  background-color: var(--thinlinc-lightgrey-50);
}