/*
    PURPOSE: Additional styles needed for styles non-default filters.

    CONTENT:
        - Toggle State Buttons
*/

/*#region --------------Toggle State Buttons---------------*/
.btn.btn-toggle {
    --bs-btn-color: var(--primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--primary);
    /*Hover*/
    --bs-btn-hover-color: var(--primary-hover);
    --bs-btn-hover-bg: var(--primary-extra-light);
    --bs-btn-hover-border-color: var(--primary-hover);
    /*Focus*/
    --btn-focus-outline-color: var(--bs-btn-hover-border-color);
    /*Active*/
    --bs-btn-active-color: var(--white);
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-active-shadow: none;
    /*Disabled*/
    --bs-btn-disabled-color: var(--primary-disabled);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-disabled);
}


.btn-check:disabled + .btn.btn-toggle, 
.btn-check[disabled] + .btn.btn-toggle {
    opacity: 1;
    color: var(--bs-btn-disabled-color);
    background: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
}

.btn-check:focus + .btn.btn-toggle,
.btn.btn-toggle:focus-visible {
    outline: var(--focus-outline-width) solid var(--btn-focus-outline-color) !important;
    box-shadow: 0 0 0 var(--focus-outline-width) var(--white) !important;
    outline-offset: var(--focus-outline-offset) !important;
    z-index: 1079;
}

button[data-bs-toggle="button"].btn.btn-toggle,
input[type=checkbox].btn-check + .btn.btn-toggle {
    --btn-toggle-pressed-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--!Font Awesome Free 6.7.0 by %40fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons  Inc.--%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    --btn-toggle-pressed-icon-color: currentColor;
    display: flex;
    align-items: center;
}

button[data-bs-toggle="button"][aria-pressed="true"].btn.btn-toggle::before,
input[type=checkbox].btn-check:checked + .btn.btn-toggle::before {
    content: "";
    flex-shrink: 0;
    height: 1em;
    width: 1em;
    margin-right: 0.25rem;
    mask-image: var(--btn-toggle-pressed-icon);
    -webkit-mask-image: var(--btn-toggle-pressed-icon);
    background: var(--btn-toggle-pressed-icon-color);
    background-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-size: 1em;
}

.btn-check:not(:checked) + .btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}
/*#endregion*/