:root {
  // the color of Miso logo SVG image
  --miso-banner-color: #1a4ce3;
  // the text preceding Miso logo
  --miso-banner-text: 'Powered by ';
  --miso-banner-text-color: #666;
  --miso-banner-height: 1.7rem;
  // margin top of the banner
  --miso-banner-gap: 1rem;
}

.miso-banner {
  text-align: right;
  margin-top: var(--miso-banner-gap);

  .miso-banner__logo {
    display: inline-block;
    color: var(--miso-banner-color);
    user-select: none;

    &::before {
      content: var(--miso-banner-text);
      float: left;
      margin-right: calc(var(--miso-banner-height) * 0.2);
      line-height: var(--miso-banner-height);
      font-weight: normal;
      font-size: calc(var(--miso-banner-height) * 0.55);
      color: var(--miso-banner-text-color);
    }
    svg {
      display: block;
      float: left;
      height: var(--miso-banner-height);
      fill: currentColor;
    }
  }
}