@import '../../mixins.scss';

@font-face {
  font-family: Graphik;
  src: url("../../fonts/graphik-regular.otf") format("opentype");
}

@font-face {
  font-family: Graphik;
  font-weight : 200;
  src: url("../../fonts/graphik-extra-light.otf") format("opentype");
}

@font-face {
  font-family: Graphik;
  font-weight : 300;
  src: url("../../fonts/graphik-light.otf") format("opentype");
}

@font-face {
  font-family: Graphik;
  font-weight : 500;
  src: url("../../fonts/graphik-medium.otf") format("opentype");
}

@font-face {
  font-family: Graphik;
  font-weight : 600;
  src: url("../../fonts/graphik-semi-bold.otf") format("opentype");
}

[data-payment-page-component="admin-marketing-notifications"] {
  --payment-page-font-family : Graphik, serif;

  background    : var( --payment-page-layout-primary-background-color );
  margin        : 40px auto 0 auto;
  overflow      : hidden;
  padding       : 40px 10px;
  border        : 1px solid #DAE4F1;

  @include border-radius( 10px );
  @include box-sizing( border-box );

  > [data-payment-page-component-admin-marketing-notifications-section="title"] {
    color       : var( --payment-page-primary-color );
    text-align  : center;
    font-size   : 20px;
    font-weight : 400;
    line-height : 1.633em;
    margin      : 0;
  }

  > [data-payment-page-component-admin-marketing-notifications-section="sub_title"] {
    color       : var( --payment-page-primary-color );
    text-align  : center;
    font-size   : 16px;
    font-weight : 300;
    line-height : 1.5em;
    margin      : 0;
  }

  > ul {
    margin          : 20px 0;
    display         : flex;
    flex-direction  : row;
    list-style-type : none;
    flex-wrap       : wrap;
    align-content   : center;
    justify-content : center;

    > li {
      cursor : pointer;
      margin : 20px 20px 0 0;
      border : 1px solid #DAE4F1;
      padding : 20px;
      display     : flex;
      align-items : center;
      position    : relative;
      width       : calc( 16.66% - 20px );

      @include box-sizing( border-box );

      @media (min-width : 1200px) {
        &:nth-child(6n+6) {
          margin-right : 0 !important;
        }
      }

      @media (max-width: 1200px) and (min-width : $break_point_medium_width) {
        width : calc( 33.33% - 40px );

        &:nth-child(3n+3) {
          margin-right : 0 !important;
        }
      }

      @media (max-width: $break_point_medium_width) and (min-width : $break_point_small_width ) {
        width : calc( 50% - 20px );

        &:nth-child(2n+2) {
          margin-right : 0 !important;
        }
      }

      @media (max-width: $break_point_small_width) {
        width : 100%;
        margin : 20px 0 0 0;
      }

      > img {
        margin : auto;
      }

      > p {
        width : 100%;
        text-align : center;
      }

      @include border-radius( 10px );

      &:hover {
        border-color : var( --payment-page-primary-color );
      }

      &[data-payment-page-interaction-state="selected"] {
        border-color : var( --payment-page-primary-color );

        &:after {
          top         : 5px;
          right       : 5px;
          position    : absolute;
          font-family : "Dashicons";
          content     : "\f12a";
          font-size   : 25px;
          color       : var( --payment-page-primary-color );
        }
      }

      &:last-child {
        margin-right : 0 !important;
      }
    }
  }

  > form {
    max-width: 800px;
    margin: 0 auto;
    display : none;

    > [data-payment-page-component-admin-marketing-notifications-section="field_wrap"] {
      max-width: 400px;
      margin: 0 auto;

      > [data-payment-page-component-admin-marketing-notifications-section="field_group"] {
        display               : grid;
        grid-template-columns : repeat(2, 1fr);
        gap                   : 10px 10px;
        margin                : 0 0 10px 0;
      }

      [data-payment-page-component-admin-marketing-notifications-section^="field-"] {
        display : flex;
        flex-direction: column;

        > label {
          font-size : 16px;
          width : 100%;
          margin : 0 0 5px 0;
        }

        > input[type="text"] {
          width : 100%;
          padding: 5px 10px;
          @include box-sizing( border-box );
        }
      }

      > [data-payment-page-component-admin-marketing-notifications-trigger="pgs_notification"] {
        cursor          : pointer;
        background      : var( --payment-page-primary-color );
        border-radius   : 6px;
        color           : #fff;
        font-size       : 18px;
        text-align      : center;
        width           : 190px;
        padding-top     : 18px;
        padding-bottom  : 14px;
        display         : block;
        margin-top      : 20px;
        text-decoration : unset;
        line-height     : 1;
        margin-left     : auto;
        margin-right    : auto;

        @include border-radius( 6px );
      }
    }

    > [data-payment-page-notification] {
      margin : 20px 0 0 0;
      text-align : center;
    }
  }
}