/**
* -------------------- 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, .woocommerce_page_develux-custom-blocks, .admin_page_develux-custom-block-builder {
  .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 {
    color: #2271b1;
    border-radius: 3px;
    border: 1px solid #2271b1;
    background: #f6f7f7;
    height: 32px;
    &:hover{
      background: #f0f0f1;
      border-color: #0a4b78;
      color: #0a4b78;
    }
  }

  .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;
  }
}
#adminmenu .toplevel_page_develuxpp-dashboard .wp-menu-image img{
  padding: 6px 0 0;
  opacity: 1;
}