/*
 * A basis for theme files to extend.
 */

label {
   flex-direction: column;
   align-items: flex-start;
}

/* ============================================
 *                INPUTS & FORMS:
 *            Checkboxes / Radiobuttons
 * ============================================ */

/* Replace standard radios/checkboxes with one that can be styled */
input[type="radio"],
input[type="checkbox"] {
   display: none;
}

input[type="radio"] + span,
input[type="checkbox"] + span {
   position: relative;

   padding: 0 0 0 1.25rem;
   overflow: visible;

   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
}

/* box and mark */
input[type="radio"] + span:before,
input[type="checkbox"] + span:before,
input[type="radio"] + span:after,
input[type="checkbox"] + span:after {
   position: absolute;
   display: flex;

   left: 0;
   top: 0;
   bottom: 0;
   margin: auto;

   align-items: center;
   justify-content: center;

   width: 1em;
   height: 1em;

   box-sizing: border-box;

   overflow: visible;
}

/* box / radio-circle */
input[type="radio"] + span:before,
input[type="checkbox"] + span:before {
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
   border: 1px solid #aaa;

   background: #f8f8f8;

   content: '';
}

input[type="radio"] + span:before {
   border-radius: 100%;
}

input[type="checkbox"] + span:before {
   border-radius: 0.2rem;
}

/* both radio and check mark (unchecked) */
input[type="radio"] + span:after,
input[type="checkbox"] + span:after {
   opacity: 0;
   transform: scale(0);

   font-size: 1em;

   /* remove pointer events on the marks for cases when the mark is stylized to draw larger than the box
      eg. a really big checkmark whose tail goes outside the box */
   pointer-events: none;
   --transition-speed: 150ms;
   transition: opacity var(--transition-speed) ease-out, transform var(--transition-speed) ease-out;
}

/* radio mark */
input[type="radio"] + span:after {
   text-shadow: 0 0 2px;
   font-weight: bold;

   content: '\2022';
}

/* check mark */
input[type="checkbox"] + span:after {
   /* the base of the check in Arial is approx here */
   transform-origin: 30% 70%;

   content: '\2714';
}

/* scale to full size when checked */
input[type="radio"]:checked + span:after,
input[type="checkbox"]:checked + span:after {
   transform: scale(1);
}

/* be visible when checked & enabled (general disabled element rules also use opacity) */
input[type="radio"]:enabled:checked + span:after,
input[type="checkbox"]:enabled:checked + span:after {
   opacity: 1;
}