@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-dashboard"] {
  --payment-page-font-family : Graphik, serif;

  font-family : Graphik, serif;
  padding     : 56px 20px 0 0;
  max-width   : 1300px;
  margin      : 0 auto;

  > [data-payment-page-component-admin-dashboard-section="logo-container"] {
    display : flex;

    > img {
      margin : 0 auto;
    }
  }

  > [data-payment-page-component-admin-dashboard-section="navigation"] {

    > [data-payment-page-component-admin-dashboard-section="quick-setup"] {
      background    : var( --payment-page-layout-primary-background-color );
      box-shadow    : 0 0 32px #C2C8CC54;
      max-width     : 547px;
      padding       : 42px 20px 30px 20px;
      margin        : 20px auto 0 auto;

      animation: 0.5s ease-out 0s 1 payment-page-admin-dashboard-animation;

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

      > [data-payment-page-component-admin-dashboard-section="sub_title"] {
        font-size    : 28px;
        font-weight  : 300;
        color        : var( --payment-page-secondary-color);
        text-align   : center;
        line-height  : 1.61em;
      }

      > [data-payment-page-component-admin-dashboard-section="title"] {
        font-size   : 31px;
        font-weight : 200;
        color       : var( --payment-page-primary-color );
        text-align  : center;
        line-height  : 1.58em;
      }

      > [data-payment-page-component-admin-dashboard-section="operations"] {
        margin      : 25px 0 0 0;
        text-align  : center;

        > a, span {
          margin          : 0 0 0 20px;
          display         : inline-block;
          color           : var( --payment-page-text-color-primary );
          font-size       : 16px;
          line-height     : 1.55em;
          font-weight     : 300;
          text-decoration : unset;
          cursor          : pointer;
        }

        > *:first-child {
          margin-left : 0;
        }
      }

    }

    > [data-payment-page-component-admin-dashboard-section="menu_container"] {
       @include payment-page-navigation-container();
    }
  }

  > [data-payment-page-component-admin-dashboard-section="container"] {
    animation: 0.7s ease-out 0s 1 payment-page-admin-dashboard-animation;

    > [data-payment-page-component-admin-dashboard-section^="payment_gateway_"] {
      display : flex;
      flex-direction: column;
      background: var( --payment-page-layout-primary-background-color );
      border-radius: 10px;
      margin-top: 40px;
      overflow: hidden;
      border-bottom : 1px solid #DAE4F1;

      @include box-sizing( border-box );

      > [data-payment-page-component-admin-dashboard-section="header"] {
        width      : 100%;
        background : var( --payment-page-primary-color );
        padding    : 20px 26px;
        height     : 80px;
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;

        @include box-sizing( border-box );

        > h2 {
          color       : #fff;
          font-size   : 22px;
          font-weight : 300;
          margin      : 0;
          display       : flex;
          align-content : center;
          align-items   : center;
        }

        > [data-payment-page-component-admin-dashboard-section="connection"] {
          margin         : 0 0 0 auto;
          display        : flex;
          flex-direction : row;

          > [data-payment-page-component-admin-dashboard-section^="account_name_"] {
            color       : #EDF3F9;
            margin      : auto 25px auto 0;
            line-height : 1em;
            font-size   : 16px;
          }

          > [data-payment-page-component-admin-dashboard-trigger^="gateway_settings_"],
          > [data-payment-page-component-admin-dashboard-trigger^="gateway_connect_"],
          > [data-payment-page-component-admin-dashboard-trigger^="gateway_disconnect_"] {
            background     : #EDF3F9;
            padding        : 8px 10px;
            border-radius  : 3px;
            line-height    : 1.4em;
            border         : 1px solid #000;
            cursor         : pointer;
            margin         : 0 25px 0 0;
            font-weight    : 500;
          }

          > [data-payment-page-component-admin-dashboard-trigger^="gateway_settings_"] {
            display: flex;
            flex-direction: row;
            align-items: center;

            > img {
              display : block;
              height: 10px;
              margin : 0 0 0 4px;
            }
          }

          > [data-payment-page-component-admin-dashboard-trigger^="gateway_connect_"] {
            > [data-payment-page-component-admin-dashboard-section] {
              display: inline-block;
              color: #63758C;
            }

            > [data-payment-page-component-admin-dashboard-section="letter"] {
              font-weight: 500;
              font-size: 18px;
              border-right: 1px solid #c8d1db;
              padding-right: 5px;
              line-height: 1;
              text-align: center;
            }

            > [data-payment-page-component-admin-dashboard-section="connect"] {
              font-size: 14px;
              margin-left: 5px;
              font-weight: 600;
            }

            &:hover > [data-payment-page-component-admin-dashboard-section] {
              color : var( --payment-page-primary-color );
            }

            .payment-page-application-loader-wrapper {
              margin : 0 auto;
            }
          }

          > [data-payment-page-component-admin-dashboard-trigger="gateway_mode"] {
            display: flex;
            flex-direction: row;
            align-content: center;
            align-items: center;

            > [data-payment-page-component-admin-dashboard-section^="gateway_mode_"] {
              font-size: 15px;
              color: #fff;
              border: 1px solid #fff;
              padding: 8px 15px;
              text-align: center;
              line-height: 1;

              @include border-radius( 4px );
              @include box-sizing( border-box );
            }

            > [data-payment-page-component-admin-dashboard-section="gateway_mode_test"][data-payment-page-interaction-state="active"] {
              border-color: #FFD200;
            }

            > [data-payment-page-component-admin-dashboard-section="gateway_mode_live"][data-payment-page-interaction-state="active"] {
              border-color: #6CD219;
            }

            > [data-payment-page-component-admin-dashboard-section="gateway_switcher"] {
              position : relative;
              display  : inline-block;
              width    : 74px;
              height   : 34px;
              margin   : 0 15px;


              > label {
                input {
                  opacity: 0;
                  width: 0;
                  height: 0;
                }

                > span {
                  position: absolute;
                  cursor: pointer;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  background-color: #fff;
                  -webkit-transition: .4s;
                  transition: .4s;
                  width: 70px;
                  margin-left: auto;
                  margin-right: auto;
                  border-radius: 34px;

                  &:before {
                    position: absolute;
                    content: "";
                    height: 26px;
                    width: 26px;
                    right: 4px;
                    bottom: 4px;
                    background-color: var( --payment-page-primary-color );
                    -webkit-transition: .4s;
                    transition: .4s;
                    border-radius: 34px;
                  }
                }

                input:checked + span {
                  background-color: #fff;

                  &:before {
                    -webkit-transform: translateX(-35px);
                    -ms-transform: translateX(-35px);
                    transform: translateX(-35px);
                  }
                }

                input:focus + span {
                  box-shadow: 0 0 1px #2196F3;
                }
              }
            }
          }
        }
      }

      > [data-payment-page-component-admin-dashboard-section="description_container"] {
        width : 100%;
        padding : 20px;
        display : flex;
        flex-direction : row;
        border-left  : 1px solid #DAE4F1;
        border-right : 1px solid #DAE4F1;

        @include box-sizing( border-box );

        > img {
          margin : auto 30px auto 0;
        }

        > div {
          color     : var(--payment-page-text-color-primary);
          font-size : 16px;

          [data-payment-page-component-admin-dashboard-trigger="upgrade"] {
            font-weight : 600;
          }

          > [data-payment-page-component-admin-dashboard-section="payment_gateway_webhook_settings_container"] {
            margin         : 15px 0 0 0;
            display        : flex;
            flex-direction : row;

            [data-payment-page-mode] {
              &[data-payment-page-mode="live"] {
                color : #6CD219;
              }

              &[data-payment-page-mode="test"] {
                color : #FFD200;
              }

              margin : 0 0 0 4px;
            }

            > [data-payment-page-component-admin-dashboard-trigger] {
              display        : flex;
              flex-direction : row;
              align-content  : center;
              align-items    : center;
              margin         : 0 10px 0 0;
              cursor         : pointer;
              color          : var( --payment-page-primary-color );

              &:last-child {
                margin : 0 auto 0 0;
              }

              > p {
                display        : flex;
                flex-direction : row;
                align-content  : center;
                align-items    : center;
                color          : var( --payment-page-primary-color );
                font-size      : 16px;
                margin         : 0;

                > [data-payment-page-component-admin-dashboard-section="title"] {
                  border-bottom  : 1px solid var( --payment-page-primary-color );
                }
              }

              > img {
                display: block;
                height: 10px;
                margin: 0 0 0 4px;
              }
            }
          }
        }
      }

      > [data-payment-page-component-admin-dashboard-section="payment_methods_container"] {
        display : none;
        border-left  : 1px solid #DAE4F1;
        border-right : 1px solid #DAE4F1;

        > [data-payment-page-component-admin-dashboard-section="payment_methods"] {
          border-top: 2px solid var( --payment-page-secondary-color );
          border-spacing:0;
          border-collapse: collapse;
          width: 100%;

          > thead {
            > tr > th {
              color     : var( --payment-page-secondary-color );
              font-size : 20px;
              padding   : 20px 20px 15px 20px;
              text-align: center;
              font-weight : 400;

              &:first-child {
                text-align : left;
              }
            }
          }

          > tbody {
            > tr {
              > td {
                border-top : 1px solid var( --payment-page-secondary-color );
                padding : 5px 20px 20px 20px;
                vertical-align: top;

                p {
                  color     : var( --payment-page-text-default-color );
                  font-size : 16px;
                  margin    : 0;
                  display   : flex;
                  align-content: center;
                  align-items: center;
                  flex-wrap: wrap;

                  > img {
                    margin     : auto 0 auto 20px;
                    max-width  : 100px;
                    max-height : 40px;
                  }

                  > a {
                    font-size : 16px;
                    color : var( --payment-page-primary-color );
                    margin : 0 0 0 4px;
                  }

                  [data-payment-page-mode] {
                    &[data-payment-page-mode="live"] {
                      color : #6CD219;
                    }

                    &[data-payment-page-mode="test"] {
                      color : #FFD200;
                    }

                    margin : 0 0 0 4px;
                  }

                  [data-payment-page-component-admin-dashboard-trigger="upgrade"] {
                    font-weight : 600;
                  }
                }

                > p {
                  margin    : 15px 0 0 0;
                }

                > [data-payment-page-component-admin-dashboard-section="payment_method_settings_container"] {
                  margin         : 15px 0 0 0;
                  display        : flex;
                  flex-direction : row;

                  > [data-payment-page-component-admin-dashboard-trigger] {
                    display        : flex;
                    flex-direction : row;
                    align-content  : center;
                    align-items    : center;
                    margin         : 0 10px 0 0;
                    cursor         : pointer;
                    color          : var( --payment-page-primary-color );

                    &:last-child {
                      margin : 0 auto 0 0;
                    }

                    > p {
                      display        : flex;
                      flex-direction : row;
                      align-content  : center;
                      align-items    : center;
                      color          : var( --payment-page-primary-color );
                    }

                    > img {
                      display: block;
                      height: 10px;
                      margin: 0 0 0 4px;
                    }
                  }
                }

                .payment-page-application-loader-wrapper {
                  margin-top : 25px;
                }

                label {
                  display: block;
                  position: relative;
                  cursor: pointer;
                  font-size: 22px;
                  -webkit-user-select: none;
                  -moz-user-select: none;
                  -ms-user-select: none;
                  user-select: none;
                  margin: 20px auto 0 auto;
                  width: 27px;

                  > input {
                    position: absolute;
                    opacity: 0;
                    cursor: pointer;
                    height: 0;
                    width: 0;

                    &:checked ~ span {
                      background-color: var( --payment-page-primary-color );

                      &::after {
                        width: 5px;
                        height: 10px;
                        border: solid white;
                        border-width: 0 3px 3px 0;
                        -webkit-transform: rotate(45deg);
                        -ms-transform: rotate(45deg);
                        transform: rotate(45deg);
                        display : block;
                        content : '';
                        margin: auto 0 8px 0;
                      }
                    }
                  }

                  > span {
                    display : flex;
                    align-content: center;
                    justify-content: center;
                    height: 25px;
                    width: 25px;
                    background-color: #eee;
                    border-radius: 3px;
                    border: 1px solid var( --payment-page-primary-color );
                  }
                }
              }
            }
          }
        }
      }

      &[data-payment-page-gateway-mode="test"] {
        [data-payment-page-component-admin-dashboard-section="account_name_live"],
        [data-payment-page-component-admin-dashboard-trigger="gateway_settings_live"],
        [data-payment-page-component-admin-dashboard-trigger="gateway_connect_live"],
        [data-payment-page-component-admin-dashboard-trigger="gateway_disconnect_live"],
        [data-payment-page-component-admin-dashboard-trigger^="payment_method-settings_live_"] {
          display : none !important;
        }

        [data-payment-page-component-admin-dashboard-section="gateway_mode_test"][data-payment-page-interaction-state="active"] {
          background: #FFD200;
        }
      }

      &[data-payment-page-gateway-mode="live"] {
        [data-payment-page-component-admin-dashboard-section="account_name_test"],
        [data-payment-page-component-admin-dashboard-trigger="gateway_settings_test"],
        [data-payment-page-component-admin-dashboard-trigger="gateway_connect_test"],
        [data-payment-page-component-admin-dashboard-trigger="gateway_disconnect_test"],
        [data-payment-page-component-admin-dashboard-trigger^="payment_method-settings_test_"] {
          display : none !important;
        }

        [data-payment-page-component-admin-dashboard-section="gateway_mode_live"][data-payment-page-interaction-state="active"] {
          background: #6CD219;
        }
      }

      > [data-payment-page-component-admin-dashboard-trigger="payment_gateway_expand"],
      > [data-payment-page-component-admin-dashboard-trigger="payment_gateway_hide"] {
        padding : 10px;
        display : flex;
        flex-direction : row;
        cursor  : pointer;
        border-top  : 1px solid #DAE4F1;
        border-left  : 1px solid #DAE4F1;
        border-right  : 1px solid #DAE4F1;

        > span {
          margin : 0 auto;
          font-size : 16px;
          line-height : 24px;
          color : var(--payment-page-text-default-color);
          border : 1px solid #DAE4F1;
          @include border-radius( 3px );
          display : flex;
          flex-direction : row;
          padding: 5px 10px;

          &:after {
            font-family : "Dashicons";
            content: "\f140";
            font-size: 26px;
            line-height: 22px;
          }
        }
      }

      > [data-payment-page-component-admin-dashboard-trigger="payment_gateway_hide"] > span:after {
        content: "\f142";
      }

      &[data-payment-page-has-payment-methods-visible="1"] {
        > [data-payment-page-component-admin-dashboard-section="description_container"] {
          padding-bottom : 15px;
        }

        > [data-payment-page-component-admin-dashboard-trigger="payment_gateway_expand"] {
          display : none;
        }
      }

      &[data-payment-page-has-payment-methods-visible="0"] {
        > [data-payment-page-component-admin-dashboard-section="payment_methods_container"] {
          display : none;
        }

        > [data-payment-page-component-admin-dashboard-trigger="payment_gateway_hide"] {
          display : none;
        }
      }
    }
  }
}

@keyframes payment-page-admin-dashboard-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity : 1;
  }
}