/**
* -------------------- BUTTON --------------------------
 */
.develux-button{
  background: white;
  cursor: pointer;
  height: 36px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-width:1px;
  gap: 8px;
  &:hover{
    background: #f0f0f1;
  }
}
.develux-button, .remove-row, .remove-repeater-field, .clear-icon{
  .svg-active-js{
    display:none;
  }
  .svg-passive-js{
    display:block;
  }
  &:hover{
    .svg-active-js{
      display:block;
    }
    .svg-passive-js{
      display:none;
    }
  }
}

.develux {
  .add-button {
    width: 120px;
    @media (max-width: 480px) {
      width: 115px;
      gap: 4px;
    }
    color: white;
    border: 1px solid $brand;
    background: $brand;

    &:hover {
      background: $brand-deep;
    }
  }
  .styling-button{
    width:178px;
    border-radius: 8px;
    color: $label-color;
    background: $gray-background;
    border: 1px solid $border-block;
    .svg-active-js{
      display:none;
    }
    .svg-passive-js{
      display:block;
    }
    &:hover{
      background: $brand-deep;
      color: #fff;
      border: 1px solid $brand-deep;
      .svg-passive-js{
        display:none;
      }
      .svg-active-js{
        display:block;
      }
    }
  }
  .save-button {
    &:hover {
      background: $brand-deep;
      color: #fff;
    }
  }

  .add-button.active {
    background: $brand-deep;
    color: #fff;

    .svg-active-js {
      display: block;
    }

    .svg-passive-js {
      display: none;
    }
  }

  .previewer-add-to-cart-button {
    background: $brand;
    color: #fff;
    cursor: pointer;
    height: 36px;
    padding: 5px 15px;
    border-radius: 4px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border-width: 1px;
    gap: 8px;

    &:hover {
      background: $brand-deep;
    }
  }

  .upload-icon-button {
    @extend .add-button;
    height: 32px;
  }

  .upload-button {
    @extend .develux-button;
    @extend .add-button;
    height: 36px;
    border: 1px solid $border-block;
  }

  .remove-repeater-field {
    height: 32px;
    width: 32px;
    cursor: pointer;
    border: none;
    background: white;
  }

  .remove-button {
    @extend .develux-button;
    border: none;
    cursor: pointer;
    background: white;
    height: 36px;
    width: 36px;
  }

  .delete-button {
    @extend .develux-button;
    border: 2px solid #e2deee;
    cursor: pointer;
    background: #fff;
    height: 36px;
    width: 100%;
  }

  .clear-uploaded-icon-button {
    height: 32px;
    width: 32px;
    cursor: pointer;
    border: none;
    background: #fff;
  }

  .preview-button {
    cursor: pointer;
    height: 30px;
    border-radius: 2px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid $brand;
    background: $brand;
    color: #fff;
    padding: 0 16px;

    &:hover {
      background: $brand-deep;
    }
  }
}
.develux-wc-button{
  display:block;
  border-radius: 2px;
  cursor: pointer;
  padding: 10px 15px;
  border: none;
  margin: 0 auto 0;
  background: $brand;
  color: #fff;
  outline: 1px solid #0000;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  &:hover, &:focus, &:active{
    background: $brand-deep;
  }
}
.develux-wc-style-select-image{
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 8px;
  min-height: 88px;
  padding: 10px;
  position: relative;
  width: 400px;
  &:hover{
    border-color: #999;
    cursor: pointer;
  }
  .timer-icon-preview{
    max-height: 160px;
    max-width: 100%;
    object-fit: cover;
  }
}
.develux-remove-timer-bg-icon{
  color: rgb(0, 124, 186);
  font-size: 13px;
  height: 36px;
  margin: 0;
  padding: 6px 12px;
  border-radius:2px;
  align-items: center;
  display:inline-flex;
  border:none;
  cursor: pointer;
  &:hover{
    background:
            color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000);
  }
}
.develux-update-remove-buttons-wrapper{
  width:100%;
  @include respond_max(1199){

  }
}
.develux-change-timer-bg-icon{
  background:
          color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000);
  align-items: center;
  -webkit-appearance: none;
  background: none;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  height: 36px;
  margin: 0;
  color:rgb(0, 90, 135);
  padding: 6px 12px;
  text-decoration: none;
  border: 1px solid rgb(0, 90, 135);
  outline: 1px solid #0000;
  white-space: nowrap;
  &:hover{
    background:
            color-mix(in srgb, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 4%, #0000);
  }
}
.develux-visit-documentation {
  cursor: pointer;
}