/*
Styles für den load ing spinner selbst.
Macht ein hübsches css spin rad, größe des rades bestimmt die width in hs-loading
Die breite des rades wird mit dem padding bestimmt.
*/

.hs-loading::after {
    opacity: 1;
    -webkit-transition: opacity .25s ease;
    transition: opacity .25s ease;
    webkit-animation: rotate 450ms infinite linear;
    animation: rotate 450ms infinite linear;
}

.hs-loading {
    width: 1em;
    padding: 3px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    --_m: conic-gradient(#0000 10%, #000),
    linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: l3 1s infinite linear;
    opacity: .5
}

.hs-loading-black {
    background: #000000 !important;
}


@keyframes l3 {
    to {
        transform: rotate(1turn)
    }
}

/*
Styles für den Shortcode button, s. auch hs-generate-cart-button.php
Für die js seite siehe auch hs-ak-add-to-cart.js (Klassenwechsel show/hide logik)
CSS Gundlage ist button-elementor, doch musste einiges angepasst werden.
*/

.hs-product-button-element {
    cursor: pointer;
}

/* Kopf-element im Button, ein übergeordnetes div das sowohl spinner als auch text enthält*/
.hs-shortcode-button-inside-head {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    text-align: center;
    overflow: hidden;
}

/*styles nur für den spinner*/
.hs-shortcode-button-inside-loading {
    padding-bottom: 0 !important;
    padding-left: 40%;
    max-height: 1em;
}

/*text ausblenden, wenn spinner aktiv.*/
.hs-shortcode-button-inside-nowloading {
    opacity: 0;
    height: 0 !important;
}

/*Styles für den text im button*/
.hs-shortcode-button-inside-text {
    padding-bottom: 0 !important;
}

/*STYLE NUR FÜR KOSTENLOSE RAUMPLANUNG. mixe höhe für button.
da der butten ein zweizeiler ist muss man die  höhe anpassen wenn der spinner läuft */
#hs_product_order_button_sku-38725 {
    min-height: 54px;
}

/*Artikel anfragen button*/
.hs-request-article-form-button {
    margin-left: 0 !important;
}

/*Anpassen, transparenter hintergrund für passwort zweigen buttons
z.b. beim login oder my-account passwort ändern
*/
.show-password-input {
    background: none !important;
}

/*
Ausblenden der aktionen in order-details
*/
.order-actions--heading {
    display: none;
}

.woocommerce-button.button.view.order-actions-button {
    display: none;
}