$eacf7_color: #1e62b9;
$eacf7_color_light: #4a98fd;
$eacf7_color: #1e62b9;
$eacf7_color_light: #4a98fd;
$eacf7_color_lighter: #00bfe8;
$eacf7_color_lighter-alt: #00d6f9;
$eacf7_color_dark: #005e82;

.eacf7-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border: 1px solid $eacf7_color_light;
  border-radius: 5px;
  background: $eacf7_color;
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  line-height: 1.5;
  font-size: 00.875rem;

  &-danger {
    background: red;
    border-color: red;

    &:hover {
      background: darken(red, 10%) !important;
      border-color: darken(red, 10%) !important;
    }
  }

  i {
    margin-right: 7px;
  }

  &.btn-success {
    background: #28a745;
    border-color: #28a745;
    color: #fff;

    &:hover {
      background: darken(#28a745, 10%);
      border-color: darken(#28a745, 10%);
      color: #fff;
    }
  }

  &.pro-feature {
    opacity: 0.5;
  }

  &.btn-outline {
    background: transparent;
    color: $eacf7_color;
  }

  &.btn-get-pro {
    background: #F4C430;
    border-color: #F4C430;
    font-weight: 500;
  }

  &:hover {
    background: darken($eacf7_color, 10%);
    color: #fff;
  }
}

.eacf7-hidden {
  display: none !important;
}

.eacf7-swal {
  z-index: 99999 !important;

  .swal2-close {
    &:focus {
      background: transparent;
      color: inherit;
      box-shadow: none;
    }
  }

  .swal2-deny,
  .swal2-cancel {
    background-color: #f08080 !important;
  }

  .swal2-input {
    width: auto !important;
  }

  // Title
  .swal2-title {
    font-size: 1.2rem;
    font-weight: 500;
  }

  &:not(.eacf7-feedback-swal) {
    .swal2-title {
      color: #333;
    }
  }

  // Text
  .swal2-html-container {
    font-size: 1rem;
    color: #555;
  }

  .swal2-textarea {
    &:focus {
      border-color: #ddd !important;
      box-shadow: none !important;
    }
  }

  &.eacf7-video-modal-swal {
    .swal2-html-container {
      margin: 0;
    }

    .swal2-close {
      top: -20px;
      position: absolute;
      right: -20px;
      background: #fff !important;
      border-radius: 50%;
    }
  }
}

#coupon-editor,
.eacf7-form-settings,
.eacf7-dashboard,
.eacf7-preview {
  .components-button-group.eacf7-button-group,
  .components-button-group.eacf7-radio-group {
    background: #eaecf0;
    padding: 5px 7px;
    width: max-content;
    border-radius: 10px;
    border: 1px solid rgba(#ddd, 00.5);

    &.google-account-id {
      button {
        width: 50px;
        height: 50px !important;

        img {
          width: 100%;
          border-radius: 50%;
        }
      }
    }

    i,
    svg {
      margin-right: 5px;
    }

    svg,
    path {
      fill: $eacf7_color;
    }

    button {
      color: $eacf7_color;
      background: #fff;
      height: 34px;
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
      border: none;
      transition: all 0.2s ease-in-out;
      box-shadow: none;

      &:first-child {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }

      &:last-child {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      &.is-primary {
        z-index: auto;
        background: $eacf7_color;
        color: #fff;
        box-shadow: inset 0 0 0 1px rgba($eacf7_color, 0.25);

        svg,
        path {
          fill: #fff;
        }
      }

      &.is-secondary {
        background: #fff;
        color: #555;
        box-shadow: inset 0 0 0 1px #ddd;

        &:hover {
          box-shadow: none;

          svg,
          path {
            fill: $eacf7_color;
          }
        }
      }

      &:hover,
      &:focus,
      &:active {
        &:not(:disabled) {
          background: $eacf7_color_light;
          border: none;
          color: #fff;
          outline: none;
          box-shadow: none;
        }
      }
    }
  }

  .eacf7-select-control {
    max-width: 300px;
  }
}

.eacf7-dashboard,
.eacf7-preview {
  .components-button-group.eacf7-button-group,
  .components-button-group.eacf7-radio-group {
    border: 0;
  }
}

.eacf7-form-settings,
.eacf7-preview {
  .components-form-toggle__track {
    width: 44px;
    height: 22px;
    border-radius: 22px;
    background: #fff;
  }

  .components-form-toggle__thumb {
    background: $eacf7_color;
    border: none;
    width: 15px;
    height: 15px;
    border-radius: 25px;
    left: 4px;
    top: 3px;
  }

  .components-form-toggle.is-checked .components-form-toggle__thumb {
    transform: translateX(22px);
  }

  .components-form-toggle.is-checked .components-form-toggle__track {
    background-color: $eacf7_color;
    border-color: $eacf7_color;
  }

  .components-radio-control__input[type="radio"] {
    &:checked {
      background-color: $eacf7_color;
    }

    &:focus {
      box-shadow: 0 0 0 2px #fff, 0 0 0 4px $eacf7_color;
    }
  }

  .components-form-toggle input.components-form-toggle__input[type="checkbox"] {
    &:checked {
      background: none;
    }
  }

  .components-form-toggle
  .components-form-toggle__input:focus
  + .components-form-toggle__track {
    box-shadow: 0 0 0 var(--wp-admin-border-width-focus) #fff,
    0 0 0 calc(var(--wp-admin-border-width-focus) * 2) var(--wp-components-color-accent, $eacf7_color);
    outline: 2px solid #0000;
    outline-offset: 2px;
  }

  .components-text-control__input[type="url"] {
    &:focus {
      box-shadow: 0 0 0 0.5px $eacf7_color;
    }
  }
}

.components-form-toggle {
  line-height: 1;
  height: 22px;

  &.disabled {
    opacity: 0.3;
  }
}

table .pro-feature {
  opacity: 0.5;
}

/*---- Tooltip ------*/
.eacf7-tooltip {
  z-index: 9999999 !important;
  opacity: 1 !important;
  color: #fff;
  background-color: $eacf7_color;

  &:before {
    z-index: -1 !important;
  }

  &.color-picker-tooltip {
    padding: 10px;
  }
}

/*----- Swal -----*/
.eacf7-swal {
  z-index: 999999 !important;

  .swal2-confirm {
    background-color: $eacf7_color !important;
  }

  .swal2-close {
    &:focus {
      background: transparent;
      color: inherit;
      box-shadow: none;
    }
  }

  .swal2-deny,
  .swal2-cancel {
    background-color: #f08080 !important;
  }

  &.eacf7-notification {
    .swal2-popup {
      display: flex !important;
      padding: 10px;

      .swal2-html-container {
        margin-left: 5px;
      }
    }
  }

  .swal2-input {
    width: auto !important;
  }

  // Title
  .swal2-title {
    font-size: 1.2rem;
    color: #333;
    font-weight: 500;
  }

  // Text
  .swal2-html-container {
    font-size: 1rem;
    color: #555;
  }

  .swal2-textarea {
    &:focus {
      border-color: #ddd !important;
      box-shadow: none !important;
    }
  }

  &-reverse {
    .swal2-deny,
    .swal2-cancel {
      background-color: $eacf7_color !important;
    }

    .swal2-confirm {
      background-color: #f08080 !important;
    }
  }
}

/**---- Color Picker ----**/
.eacf7-color-picker-wrapper {
  .color-holder-wrap {
    display: flex;
    align-items: center;

    .color-holder {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
      border: 1px solid #ddd;
      cursor: pointer;
      position: relative;
      z-index: 1;
      overflow: hidden;
      background: repeating-linear-gradient(
                      45deg,
                      #e0e0e0 25%,
                      #0000 0,
                      #0000 75%,
                      #e0e0e0 0,
                      #e0e0e0
      ) 0 0 / 24px 24px,
      repeating-linear-gradient(
                      45deg,
                      #e0e0e0 25%,
                      #0000 0,
                      #0000 75%,
                      #e0e0e0 0,
                      #e0e0e0
      ) 12px 12px / 24px 24px;
    }

    .color-input {
      width: 100px !important;
      height: 32px !important;
      padding: 5px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-right: 10px;
    }

    .dashicons-edit {
      cursor: pointer;
    }
  }

  .components-color-picker {
    .components-select-control {
      width: auto;
      margin-left: 0;

      .components-input-control__container {
        width: 100%;

        select {
          height: 35px !important;
        }

        .components-input-control__backdrop {
          border-color: #ddd;
          height: 35px;
        }
      }
    }

    .components-input-control__input {
      height: 35px !important;
      min-height: auto !important;
    }

    .components-h-stack {
      padding: 0;
      margin-bottom: 7px;

      & + .components-flex {
        padding: 0;

        .components-input-control__container {
          width: 100%;

          .components-input-control__backdrop {
            border-color: #ddd;
            height: 40px;
          }
        }
      }
    }

    .react-colorful__saturation {
      height: 130px;
    }
  }
}

.eacf7-popup-edit {
  color: #777;
  border: 1px solid #ddd;
  padding: 4px;
  height: 24px;
  width: 24px;
  font-size: 24px;
  box-sizing: content-box !important;
  cursor: pointer;
  background: #fff;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;

  &-wrap {
    display: flex;
    align-items: center;
  }

  &:hover {
    background: #f9f9f9;
  }
}

.popup-settings-reset {
  cursor: pointer;
  margin-left: 15px;
  color: #999;

  &:hover {
    color: #555;
  }
}

.eacf7-popup-settings {
  display: flex;
  flex-direction: column;

  .eacf7-popup-control {
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    &-label {
      margin-bottom: 5px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
      width: 120px;
    }

    .eacf7-select {
      flex: 1;
      z-index: 3;

      &__input {
        height: auto;
      }
    }

    .components-select-control {
      .components-input-control__container {
        width: 150px;

        select {
          font-size: 13px;
          color: #555;
          height: 35px !important;
        }

        .components-input-control__backdrop {
          height: 35px;
        }
      }
    }

    .components-font-size-picker {
      .components-font-size-picker__custom-size-control {
        & > div:first-child {
          flex: none;
        }
      }

      .components-input-control__container {
        width: 80px;

        .components-input-control__input,
        .components-unit-control__select,
        .components-input-control__backdrop {
          height: 35px !important;
        }
      }

      .components-input-control__suffix {
        background: #eee;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }

      .components-range-control {
        width: auto;
        margin: 0 10px 0 0;
      }

      .components-base-control__label {
        font-size: 0;

        .components-font-size-picker__header__hint {
          font-size: 11px;
          margin-left: -3px;
        }
      }
    }

    .components-select-control {
      .components-input-control__container {
        width: 150px;

        select {
          font-size: 13px;
          color: #555;
          height: 35px !important;
        }

        .components-input-control__backdrop {
          height: 35px;
        }
      }
    }

    .eacf7-color-picker-wrapper {
      .color-holder-wrap {
        .color-input {
          height: 35px !important;
          width: 80px !important;
        }
      }
    }

    .eacf7-box-control {
      .component-box-control__unit-control {
        max-width: 70px;
      }

      .components-h-stack {
        .components-range-control {
          margin: 0 5px 0 10px;
        }
      }

      .component-box-control__reset-button {
        margin-left: 0;
      }
    }

    .components-range-control {
      margin-top: 0;
      width: 180px;

      .components-number-control {
        .components-input-control__container {
          width: 60px;
        }
      }
    }

    &.control-full-width,
    &.control-full-width {
      width: 100%;
      align-items: flex-start;
      flex-direction: column;

      .typography-control-label {
        width: 100%;
      }

      & > div,
      & > fieldset {
        width: 100%;
      }
    }
  }
}

/**---- Typography ----**/
.eacf7-typography {
}

/**---- Border ----**/
.eacf7-border {
}

/**---- Box Shadow ----**/
.eacf7-box-shadow {
}

/**---- Box Control ----**/
.eacf7-box-control {
  & > div {
    & > div {
      line-height: 0;

      &:has(.component-box-control__linked-button) {
        grid-area: 1 / 4;
      }
    }

    .component-box-control__reset-button {
      grid-area: 1 / 5;
    }
  }

  .components-base-control__label {
    display: none;
  }

  .components-h-stack {
    justify-content: flex-start;

    .component-box-control__unit-control {
      .components-input-control__container {
        width: auto;
      }

      .components-input-control__backdrop {
        height: auto;
      }
    }

    .components-range-control {
      width: auto;
      flex: 1;
      margin: 0 15px 0 10px;
      max-width: 200px;
      min-width: 130px;
    }
  }

  //reset button, light red type
  .component-box-control__reset-button {
    background: transparent;
    color: #999;
    border: none;
    box-shadow: none !important;
    padding: 0;
    font-size: 0;
    font-family: dashicons;
    line-height: 1;
    font-weight: 400;
    font-style: normal;
    speak: never;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.1s ease-in;
    cursor: pointer;

    &:before {
      content: "\f531";
      font-size: 20px;
    }
  }
}

#tag-generator-list {
  .eacf7 {
    border-color: transparent;
    background-color: rgb(30, 98, 185);
    color: white;
    border-radius: 5px;
    height: auto;
  }
}

/**---- Custom CSS ----**/
.eacf7-custom-css {
  .CodeMirror {
    border: 1px solid #ddd;
    border-radius: 5px;
  }
}

.eacf7-popup {
  position: relative;
  display: flex;

  button {
    cursor: pointer;
    background: #fff;
    border-radius: 50px;
    position: absolute;
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease-in-out;

    i {
      &.play {
        color: $eacf7_color;
      }
    }
  }
}

.eacf7-pro-icon {
  width: 26px;
  height: 26px;
  margin-left: 5px;
  background: #ffc300;
  padding: 3px 5px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;

  i {
    background: #fff;
  }
}