// Here lies 𝖄𝖊 𝕸𝖆𝖗𝖌𝖎𝖓 𝕸𝖆𝖌𝖎𝖈
// which allows to have just one wrapper div
.iconified-input {
  align-items: center;
  display: inline-flex;
  flex-direction: row-reverse;

  input {
    padding-left: 2.5rem;

    &:hover {
      &+svg {
        color: var(--color-grey-6);
      }
    }

    &:focus {
      &+svg {
        color: var(--color-text);
      }
    }
  }

  svg {
    color: var(--color-grey-5);
    margin-right: -2rem;
  }
}

.badge {
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.02rem;
  padding: 0.25rem 0.5rem;

  &.gray {
    background-color: #c8c1c1;
    color: #646161;
  }

  &.red {
    background-color: #fed7d7;
    color: #9b2c2c;
  }

  &.green {
    background-color: #c6f6d5;
    color: #276749;
  }

  &.yellow {
    background-color: #f6e8c6;
    color: #675027;
  }
}

.required:after {
  content: ' *';
  color: red;
}

.markdown-body {
  p {
    padding: 0;
    margin: 0;
    line-height: 1.5;
    word-wrap: break-word;
  }

  h1, h2 {
    padding: 10px 0 5px;
    border-bottom: 1px solid var(--color-grey-3);
  }

  blockquote {
    margin: 15px 0;
    padding: 0 1em;
    color: var(--color-grey-5);
    border-left: .25em solid var(--color-grey-3);
  }

  a {
    color: var(--color-link);
  }

  img {
    max-width: 100%;
  }

  pre {
    padding: 15px 10px;
    border-radius: var(--size-rounded-sm);
    background-color: var(--color-grey-1);

    code {
      font-size: 80%;
      padding: 0;
      border-radius: 0;
    }
  }

  code {
    padding: .2em .4em;
    font-size: 60%;
    border-radius: var(--size-rounded-sm);
    background-color: var(--color-grey-1)
  }

  hr {
    margin: 20px 0;
    color: var(--color-grey-2);
  }
}