// Variables - combining and organizing
$main-color: #f5f5f5;
$accent-color: teal;
$hover-accent: darken($accent-color, 10%);
$secondary-color: #0077c2;
$hover-secondary: darken($secondary-color, 10%);
$text-color: #774646;
$div-width: 460px;
$shadow: 2px 4px 10px 1px rgba(201, 201, 201, 0.47);
$animation-duration: 0.5s;
$animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$border-radius: 8px;

// Mixins
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin hover-transition {
  transition: all $animation-duration $animation-timing-function;
}

@mixin button-style($bg-color, $hover-color) {
  background-color: $bg-color;
  border: none;
  color: white;
  cursor: pointer;
  font-weight: 700;
  padding: 10px;
  border-radius: 3px;
  @include hover-transition;

  &:hover {
    background-color: $hover-color;
  }
}

.acb_add_mail {
  display: flex;
  padding: 20px;
  gap: 20px;

  @media (max-width: 992px) {
    flex-direction: column;
  }

  .acb_mails_container {
    flex: 6;

    .acb_top,
    .acb_bottom {
      -webkit-box-shadow: 2px 4px 10px 1px rgba(0, 0, 0, 0.47);
      box-shadow: $shadow;
      margin: 5px;
      padding: 0px 0px 0px 12px;
      @include flex-center;

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
      }

      img.wpnts_logo_footer,
      .wpnts_logo_footer_2 {
        width: auto;
        height: 50px;
        @include flex-center;
        text-align: center;
        margin-right: 35px;
        margin-top: 13px;
        cursor: pointer;
        @include hover-transition;

        &:hover {
          opacity: 0.8;
        }
      }

      .wpnts_logo_footer_2 {
        width: 45px;
        height: 25px;
      }

      h1 {
        color: $text-color;
        font-size: 20px;

        &.setting_panel {
          flex: 3;
          display: flex;
          gap: 10px;
          margin-top: 25px;

          @media (max-width: 768px) {
            margin-top: 15px;
          }

          a {
            color: $text-color;
            text-decoration: none;
            cursor: pointer;
            @include hover-transition;
            position: relative;

            &:after {
              content: '';
              position: absolute;
              width: 0;
              height: 2px;
              bottom: -2px;
              left: 0;
              background-color: $accent-color;
              @include hover-transition;
            }

            &:hover {
              color: $accent-color;

              &:after {
                width: 100%;
              }
            }
          }
        }

        &.tesing_panel {
          flex: 3;
          margin-left: 250px;
          display: flex;
          gap: 5px;

          @media (max-width: 992px) {
            margin-left: 0;
            margin-top: 15px;
          }
        }
      }

      // left ------------------------------------------------
      .acb_left {
        flex: 3;
        text-align: center;
        margin: 25px;
        padding: 14px;
        position: relative;
        bottom: 230px;

        .wpntsbtn {
          position: sticky;
          top: 5px;
        }

        @media (max-width: 992px) {
          bottom: 0;
          margin: 15px 0;
        }

        .wpnts-form-list {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 35px;
          height: 515px;
          overflow-y: scroll;
          margin-top: 260px;

          @media (max-width: 992px) {
            margin-top: 20px;
            height: auto;
            max-height: 515px;
          }

          &::-webkit-scrollbar {
            width: 6px;
          }

          &::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
          }

          &::-webkit-scrollbar-thumb {
            background: $accent-color;
            border-radius: 10px;
          }

          button.wpnts-add-form {
            @include button-style($accent-color, $hover-accent);
            width: 160px;
            margin-bottom: 11px;
            position: relative;
            font-weight: 700;

            span.wcs_tooltip_class {
              position: absolute;
              top: 12px;
              right: 27px;

              svg.wcs_tooltip_icon {
                font-size: 15px;
              }
            }
          }

          .wpnts-save-form {
            @include button-style($secondary-color, $hover-secondary);
            margin-left: 10px;
            width: 160px;
            margin-bottom: 11px;
          }
        }

        .wpnts-form {
          border: 1px solid #d3d3d3;
          border-radius: 10px;
          margin-bottom: 20px;
          width: 500px;
          @include hover-transition;

          @media (max-width: 768px) {
            width: 100%;
          }

          &:hover {
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
          }

          .wpnts-form-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: $main-color;
            cursor: pointer;
            border-radius: 10px;
            width: $div-width;
            background-image: linear-gradient(to right, $main-color, darken($main-color, 10%));
            background-size: $div-width*2 100%;
            transition: background-position $animation-duration $animation-timing-function;

            @media (max-width: 768px) {
              width: 100%;
              background-size: 200% 100%;
            }

            &:hover {
              background-position: -419px 0;
              animation: wave $animation-duration $animation-timing-function;

              @media (max-width: 768px) {
                background-position: 100% 0;
              }
            }

            @keyframes wave {
              0% {
                background-position: 0 0;
              }

              100% {
                background-position: $div-width 0;
              }
            }

            h2 {
              margin: 0;
              font-size: 18px;
            }

            button.wpnts-delete-form {
              border: none;
              background: none;
            }

            .wpnts-delete-button {
              padding: 5px 10px;
              font-size: 20px;
              background-color: transparent;
              color: $accent-color;
              border: none;
              border-radius: 4px;
              cursor: pointer;
              transition: all 0.2s;

              &:hover {
                color: #c62828;
                transform: scale(1.1);
              }
            }
          }

          .wpnts-form-content {
            padding: 10px 20px;
            background-color: #ffffff;
            border-radius: 0 0 10px 10px;

            input {
              width: 100%;
              padding: 8px 5px;
              border: none;
              border-bottom: 1px solid gray;
              @include hover-transition;

              &:focus {
                outline: none;
                box-shadow: none;
                border-color: $accent-color;
              }
            }
          }
        }

        //webhook setting
        form {
          position: relative;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          gap: 20px;

          label {
            display: flex;
            align-items: center;
            gap: 10px;
            white-space: nowrap;
          }

          .formInput {
            width: 60%;

            @media (max-width: 768px) {
              width: 100%;
            }

            textarea {
              height: 150px;
              width: 100%;
              padding: 8px;
              border: 1px solid #ddd;
              // background-color: #F0F0F1;
              @include hover-transition;

              &:focus {
                outline: none;
                border-color: $accent-color;
              }
            }

            input {
              width: 100%;
              padding: 5px;
              border: none;
              border-bottom: 1px solid gray;
              // background-color: #F0F0F1;
              @include hover-transition;

              &:focus {
                outline: none;
                box-shadow: none;
                border-color: $accent-color;
              }
            }

            .wpnts-setting {
              position: relative;

              .passimg {
                position: absolute;
                left: 90px;
                font-size: 18px;
                top: -19px;
                cursor: pointer;
                @include hover-transition;

                &:hover {
                  color: $accent-color;
                }
              }
            }
          }

          .save-webhook {
            @include button-style($accent-color, $hover-accent);
            width: 160px;
            font-weight: bold;
            float: left;
          }
        }
      }

      // right ------------------------------------------------
      .acb_right {
        flex: 3;
        margin: 25px;
        margin-top: 37px;

        @media (max-width: 992px) {
          margin: 15px 0;
        }

        // player 
        .wcs-player-wrapper {
          position: relative;
          padding-top: 30%;
          margin-top: 14px;
          border: 6px solid white;
          border-radius: $border-radius;
          overflow: hidden;
          @include hover-transition;

          &:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
          }

          .wcs-react-player {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }

        // Toggle 
        .wpnts-switch-review,
        .wpnts-switch-support {
          font-size: 17px;
          text-align: left;
          display: flex;
          align-items: center;
          margin-bottom: 25px;
        }

        .reviewSwitch {
          margin-left: 19px;
          cursor: pointer;
        }

        .wpnts-switch-support {
          margin-bottom: 23px;
        }

        .supportSwitch {
          margin-left: 12px;
          cursor: pointer;
        }

        .corn-link {
          .setting_data {
            a {
              color: green;
              cursor: pointer;
              position: relative;
              text-decoration: none;
              @include hover-transition;

              &:after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -2px;
                left: 0;
                background-color: rgb(247, 113, 17);
                @include hover-transition;
              }

              &:hover {
                color: rgb(247, 113, 17);

                &:after {
                  width: 100%;
                }
              }
            }
          }
        }
      }
    }
  }
}