gitcoinco/code_fund_ads

$label-text: 'Ad';

div#cf[data-template='horizontal'] {
  span.cf-wrapper {
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
    line-height: 1.5;
    display: block;
    padding: 12px 11px;
    text-align: left;
    margin: 12px 0;

    a.cf-text {
      text-decoration: none;

      &:before {
        margin-right: 4px;
        padding: 2px 6px;
        border-radius: 3px;
        content: $label-text;
      }

      span.cf-cta {
        text-decoration: underline;
      }
    }

    a.cf-powered-by {
      text-decoration: none;
      float: right;
      font-size: 11px;
      line-height: 22px;

      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
  }

  &[data-theme='dark'] {
    $bg-color: rgba(255, 255, 255, 0.2);
    $text-color: rgba(255, 255, 255, 0.7);
    $border-color: #bfbfbf;
    $label-bg-color: #4caf50;
    $label-text-color: #ffffff;
    $link-color: #ffffff;
    $powered-by-color: rgba(255, 255, 255, 0.5);

    span.cf-wrapper {
      background-color: $bg-color;

      a.cf-text {
        color: $text-color;

        &:before {
          background-color: $label-bg-color;
          color: $label-text-color;
        }

        span.cf-cta {
          color: $link-color;
        }
      }

      a.cf-powered-by {
        color: $powered-by-color;
      }
    }
  }

  &[data-theme='light'] {
    $bg-color: #f8f8f8;
    $text-color: rgba(0, 0, 0, 0.6);
    $border-color: #bfbfbf;
    $label-bg-color: #4caf50;
    $label-text-color: #ffffff;
    $link-color: #2c6ac7;
    $powered-by-color: rgba(0, 0, 0, 0.5);

    span.cf-wrapper {
      background-color: $bg-color;

      a.cf-text {
        color: $text-color;

        &:before {
          background-color: $label-bg-color;
          color: $label-text-color;
        }

        span.cf-cta {
          color: $link-color;
        }
      }

      a.cf-powered-by {
        color: $powered-by-color;
      }
    }
  }

  @media screen and (max-width: 859px) {
    a.cf-powered-by {
      display: none;
    }
  }
}