gitcoinco/code_fund_ads

$label-text: 'Ad';

div#cf[data-template='bottom-bar'] {
  span.cf-wrapper {
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5000;
    padding: 10px 20px 12px 20px;
    width: 100%;
    border-top: solid 1px;
    border-color: transparent;
    line-height: 1.5;
    display: flex;
    justify-content: space-between;
    text-align: left;

    a.cf-text {
      text-decoration: none;
      box-shadow: none;
      font-size: 14px;

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

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

    div.cf-footer {
      font-size: 11px;
      line-height: 22px;
      text-decoration: none;
      box-shadow: none;

      span.cf-close {
        cursor: pointer;
      }

      a.cf-powered-by {
        text-decoration: none;
      }
    }
  }

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

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

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

      div.cf-footer {
        color: $powered-by-color;
        span.cf-close {
          color: $powered-by-color;
          &:hover {
            color: $text-color;
          }
        }
        a.cf-powered-by {
          color: $powered-by-color;
          &:hover {
            color: $text-color;
          }
        }
      }
    }
  }

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

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

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

      div.cf-footer {
        color: $powered-by-color;
        span.cf-close {
          color: $powered-by-color;
          &:hover {
            color: $text-color;
          }
        }
        a.cf-powered-by {
          color: $powered-by-color;
          &:hover {
            color: $text-color;
          }
        }
      }
    }
  }

  &[data-theme='blue'] {
    $bg-color: #2c6ac7;
    $text-color: #ffffff;
    $border-color: #1c1565;
    $label-bg-color: #1c1565;
    $label-text-color: #ffffff;
    $powered-by-color: rgba(255, 255, 255, 0.5);

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

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

      div.cf-footer {
        color: $powered-by-color;
        span.cf-close {
          color: $powered-by-color;
          &:hover {
            color: $text-color;
          }
        }
        a.cf-powered-by {
          color: $powered-by-color;
          &:hover {
            color: $text-color;
          }
        }
      }
    }
  }

  @media only screen and (min-width: 480px) and (max-width: 859px) {
    a.cf-text {
      font-size: 14px;
      margin-right: 0;
    }
    div.cf-footer {
      display: none;
    }
  }

  @media only screen and (min-width: 320px) and (max-width: 479px) {
    a.cf-text {
      font-size: 12px;
      margin-right: 0;
    }
    div.cf-footer {
      display: none;
    }
  }
}