AstralRinth/assets/styles/components.scss

// 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);
  }
}

.tooltip {
  display: block !important;
  z-index: 10000;

  .tooltip-inner {
    background: var(--color-grey-2);
    color: var(--color-text);
    padding: 5px 10px 4px;
  }

  .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    margin: 5px;
    border-color: var(--color-grey-2);
    z-index: 1;
  }

  &[x-placement^="top"] {
    margin-bottom: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 0 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      bottom: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="bottom"] {
    margin-top: 5px;

    .tooltip-arrow {
      border-width: 0 5px 5px 5px;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -5px;
      left: calc(50% - 5px);
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  &[x-placement^="right"] {
    margin-left: 5px;

    .tooltip-arrow {
      border-width: 5px 5px 5px 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[x-placement^="left"] {
    margin-right: 5px;

    .tooltip-arrow {
      border-width: 5px 0 5px 5px;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[aria-hidden='true'] {
    visibility: hidden;
    opacity: 0;
    transition: opacity .15s, visibility .15s;
  }

  &[aria-hidden='false'] {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s;
  }
}