/**
 * Styling for vendor funding program info boxes on the vendor details popup
 */

.funding-programs {
  /*main container*/

  text-align: left;
  font-size: var(--font-size-sm);

  & h4 {
    /*eligibility header*/
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: var(--font-size-md);
  }

  & .funding-programs__badges {
    /*badge container*/

    margin: 1rem 0;

    & .funding-badge {
      /*single badge*/

      display: inline-block;
      color: white;
      padding: 4px 10px;
      margin: 3px 0.3rem;
      border-radius: 8px;
      line-height: 1;

      &::before {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jaGVjay1pY29uIGx1Y2lkZS1jaGVjayI+PHBhdGggZD0iTTIwIDYgOSAxN2wtNS01Ii8+PC9zdmc+");
        vertical-align: sub;
        margin-right: 4px;
        color: white;
      }

      &.efa {
        background-color: var(--efa-eligible-color);
      }

      &.estf {
        background-color: var(--efa-eligible-color);
      }

      &.tefa {
        background-color: var(--efa-eligible-color);
      }

      &.piak {
        background-color: #185fa5;

        &::after {
          content: "new";
          border-radius: 4px;
          background-color: #c0dd97;
          padding: 2px 6px;
          margin-left: 0.6rem;
          display: inline-block;
          font-size: var(--font-size-xs);
          color: #185fa5;
          font-weight: bold;
        }
      }
    }
  }

  & .funding-programs__info {
    /*descriptions*/

    border: 1px solid #d6d9de;
    border-radius: 12px;

    & h5 {
      /*descriptions subheader*/
      color: var(--gray-600);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background-color: #f5f5f7;
      padding: 0.7rem 0 0.7rem 1rem;
      border-top-left-radius: 12px;
      border-top-right-radius: 12px;
      font-size: var(--font-size-sm);
    }

    & .funding-programs__program {
      /*single program's details*/

      background-color: white;
      padding: 1rem;
      border-top: 1px solid #d6d9de;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;

      & h6 {
        /*program title*/

        font-size: var(--font-size-md);
        font-weight: 600;
        margin-bottom: 0.5rem;

        &::before {
          content: "•";
          font-size: var(--font-size-3xl);
          margin-right: 4px;
          line-height: 0;
          vertical-align: sub;
          color: var(--efa-eligible-color);
        }
      }

      & p {
        /*program description*/
        margin-bottom: 0.5rem;
      }

      & a::after {
        /*learn more link*/
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0LWljb24gbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=");
        line-height: 1;
        vertical-align: text-bottom;
        margin-left: 0.2rem;
      }
    }
  }

  & .funding-programs__stacking {
    /*program stacking notes*/

    background-color: #f5f5f7;
    border-top: 1px solid #d6d9de;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 0.7rem 1rem;

    &::before {
      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWluZm8taWNvbiBsdWNpZGUtaW5mbyI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTAiLz48cGF0aCBkPSJNMTIgMTZ2LTQiLz48cGF0aCBkPSJNMTIgOGguMDEiLz48L3N2Zz4=");
      position: relative;
      left: -0.3rem;
      top: 0.2rem;
      float: left;
    }

    & p {
      /*individual note*/
      margin: 0 0 0 1rem;
    }
  }
}