:root {
  --output-background: #424242;
  --output-foreground: #d1f3cd; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Operator Mono', 'Inconsolata', 'Roboto Mono', monospace; }

h1 {
  font-size: rem(24);
  line-height: 1.5; }

a {
  will-change: background-color;
  display: inline-block;
  margin: rem(-2) rem(-4);
  padding: rem(2) rem(4);
  color: var(--tertiary-dark);
  background-color: rgba(227, 242, 253, 0);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
  a:hover, a:focus {
    background-color: #e3f2fd; }

*:focus {
  outline-color: var(--tertiary);
  outline-width: rem(1);
  outline-style: solid;
  outline-offset: rem(4); }

input {
  appearance: none;
  background: transparent;
  border: none;
  font-family: 'Roboto Mono'; }
  input[type="color"] {
    font-size: 0;
    width: rem(24);
    height: rem(24);
    border-radius: 50%; }
    input[type="color"]::-webkit-color-swatch-wrapper {
      display: block;
      padding: 0; }
    input[type="color"]::-webkit-color-swatch {
      border: none;
      width: rem(24);
      height: rem(24);
      border-radius: 50%;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); }

button {
  display: inline-block;
  appearance: none;
  font-size: 0;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer; }

svg {
  width: rem(24);
  height: rem(24);
  fill: currentColor; }

[hidden] {
  display: none; }

.container {
  position: relative;
  width: 100%;
  max-width: rem(400);
  margin: 0 rem(8);
  background: white;
  border-radius: rem(4);
  border: 1px solid var(--primary); }
  .container__header {
    padding: rem(16) rem(24) rem(8); }
  .container__body:first-of-type {
    padding: 0 rem(24); }
  .container__body:not(:first-of-type) {
    padding: 0 rem(24) rem(16); }
  .container__footer {
    padding: rem(8) rem(24);
    border-top: 1px solid var(--primary);
    border-radius: 0 0 rem(3) rem(3); }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .header__button {
    position: relative;
    padding: rem(8);
    background-color: var(--tertiary);
    color: var(--primary-text-on-tertiary);
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); }
    .header__button svg {
      will-change: transform;
      transform-origin: cetner center;
      transform: rotate(0deg);
      transition: transform 100ms cubic-bezier(0.4, 0, 0.2, 1); }
    .header__button::after {
      content: attr(aria-label);
      will-change: opacity;
      position: absolute;
      right: 100%;
      top: 100%;
      color: var(--primary-text-on-primary);
      font-size: rem(14);
      white-space: nowrap;
      background-color: var(--primary);
      padding: rem(4) rem(8);
      border-radius: rem(4);
      pointer-events: none;
      z-index: 100000;
      opacity: 0;
      transform-origin: right top;
      transform: scale(0.8);
      transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); }
    .header__button:hover, .header__button:focus {
      background-color: var(--tertiary-dark); }
      .header__button:hover::after, .header__button:focus::after {
        opacity: 1;
        transform: scale(1); }
    .header__button:active svg {
      transform: rotate(24deg); }

.input {
  --font-scale: 0.8;
  --font-transform: scale(var(--font-scale)) translate(rem(4), rem(-20)); }
  .input__label {
    will-change: transform;
    position: absolute;
    width: calc(100% - 16px);
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding-left: 16px;
    font-size: rem(16);
    color: var(--primary-text-on-light);
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center left;
    pointer-events: all; }
  .input__input {
    width: calc(100% - ( 16px * 2 ) );
    margin: rem(24) rem(16) rem(8);
    font-size: rem(16);
    color: var(--primary-text-on-light); }
    .input__input:not(.placeholder-shown) + .input__label {
      color: var(--secondary-text-on-light);
      transform: var(--font-transform);
      pointer-events: none; }
    .input__input:focus {
      outline: none; }
  .input__error {
    will-change: opacity;
    position: absolute;
    display: none;
    opacity: 0;
    top: 100%;
    margin: rem(8) 0;
    padding: 0 rem(16);
    font-size: rem(14);
    color: #d50000; }
  .input__color {
    position: absolute;
    top: 50%;
    right: rem(16);
    padding: 0;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer; }
    .input__color--foreground {
      background-color: var(--output-foreground); }
    .input__color--background {
      background-color: var(--output-background); }
  .input--container {
    will-change: border-color;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    max-width: rem(480);
    margin: rem(8) 0 rem(32);
    background-color: #f0f0f0;
    border: 1px solid var(--border-color-on-light);
    border-radius: rem(4);
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
    cursor: text; }
    .input--container:hover {
      border-color: var(--border-secondary-color-on-light); }
    .input--container:focus-within {
      border-color: var(--tertiary); }
      .input--container:focus-within .input__label {
        color: var(--tertiary);
        transform: var(--font-transform);
        pointer-events: none; }

.warning {
  margin-bottom: rem(16);
  color: #884000;
  font-size: rem(14);
  background-color: #fffde7;
  border-top: rem(1) solid var(--primary);
  border-bottom: rem(1) solid var(--primary); }
  .warning__container {
    display: flex;
    align-items: center;
    font-weight: 300;
    padding: rem(8) rem(24); }
  .warning__text-icon {
    font-size: 0;
    margin-right: rem(8); }
    .warning__text-icon svg {
      width: rem(18);
      height: rem(18); }

.wcag p {
  line-height: 1.5; }
.wcag__level {
  display: flex;
  align-items: center;
  color: var(--secondary-text-on-light); }
  .wcag__level-icon {
    font-size: 0; }
    .wcag__level-icon svg {
      width: rem(18);
      height: rem(18); }
    .wcag__level-icon--pass {
      color: #1b5e20; }
    .wcag__level-icon--fail {
      display: none;
      color: #ac1616; }
  .wcag__level-text {
    padding-left: rem(8); }

.result--container {
  color: var(--output-foreground);
  background-color: var(--output-background); }
.result__text {
  font-weight: 100;
  color: var(--output-foreground); }

.container__body .wcag .wcag--container {
  display: inline-flex; }

svg:not(:root) {
  overflow: hidden;
  width: 75px;
  display: flex;
  position: absolute; }

.containerCRC {
  width: 0% !important;
  display: contents !important; }

.ccrlogo {
  width: 75px;
  display: flex;
  position: absolute; }