/**
 * Styling for vendor enrollment method info boxes on the vendor details popup
 */

.enrollment-method {
  /*main container*/

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

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

  & .enrollment-method__badges {
    /*badge container*/

    margin: 1rem 0;

    & .enrollment-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;
      }

      &.oneapp {
        background-color: #0f6f57;

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

  & .enrollment-method__info {
    /*descriptions*/

    border: 1px solid #0f6f57;
    border-radius: 12px;

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

      &::before {
        /*up icon*/
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1hcnJvd3MtdXAtZnJvbS1saW5lLWljb24gbHVjaWRlLWFycm93cy11cC1mcm9tLWxpbmUiPjxwYXRoIGQ9Im00IDYgMy0zIDMgMyIvPjxwYXRoIGQ9Ik03IDE3VjMiLz48cGF0aCBkPSJtMTQgNiAzLTMgMyAzIi8+PHBhdGggZD0iTTE3IDE3VjMiLz48cGF0aCBkPSJNNCAyMWgxNiIvPjwvc3ZnPg==");
        line-height: 1;
        vertical-align: text-bottom;
        margin-right: 0.5rem;
      }
    }

    & .enrollment-method__method {
      /*single method's details*/

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

      & p {
        /*method description*/
        margin-bottom: 1rem;
      }

      & a.enroll-link {
        /*enrollment button*/
        background-color: #0f6f57;
        color: white;
        padding: 0.6rem 1rem;
        border-radius: 12px;
        display: inline-block;
        margin-right: 1rem;

        &::before {
          /*external icon*/
          content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1zcXVhcmUtYXJyb3ctb3V0LXVwLXJpZ2h0LWljb24gbHVjaWRlLXNxdWFyZS1hcnJvdy1vdXQtdXAtcmlnaHQiPjxwYXRoIGQ9Ik0yMSAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMmg2Ii8+PHBhdGggZD0ibTIxIDMtOSA5Ii8+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PC9zdmc+");
          line-height: 1;
          vertical-align: text-bottom;
          margin-right: 0.2rem;
        }
      }

      & a.learn-link {
        /*learn more link*/

        display: inline-block;
        margin-top: 0.7rem;

        & .tail {
          white-space: nowrap;

          &::after {
            /*learn more link*/
            content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0LWljb24gbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=");
            margin-left: 0.25rem;
            position: relative;
            top: 0.2rem;
          }
        }
      }
    }
  }
}