sibedas/resources/scss/components/_buttons.scss

//
// buttons.scss
//

.button-list {
    margin-left: -8px;
    margin-bottom: -8px;

    .btn {
        margin-bottom: 8px;
        margin-left: 8px;
    }
}

button:focus {
    outline: none;
}

// Icon Button
.btn {

    i,
    span {
        vertical-align: middle;
    }

    &:focus {
        box-shadow: none;
    }

    .icon {
        svg {
            width: 1rem;
            height: 1rem;
            margin-left: 0.1rem;
            margin-top: -2px;
        }
    }
}


// Link buttons (Make a button look and behave like a link)
.btn-link {
    font-weight: $font-weight-normal;
    color: $link-color;
    background-color: transparent;

    &:hover {
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;
        background-color: transparent;
        border-color: transparent;
    }

    &:focus {
        text-decoration: $link-hover-decoration;
        border-color: transparent;
        box-shadow: none;
    }

    &:disabled {
        color: $btn-link-disabled-color;
        pointer-events: none;
    }

}

// Button Extra Small Size
.btn-xs {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    border-radius: $border-radius-sm;
}

// Soft Variants
@mixin button-variant-soft($bg) {
    --#{$prefix}btn-color: #{$bg};
    --#{$prefix}btn-bg: #{rgba($bg, 0.1)};
    --#{$prefix}btn-border-color: #{transparent};
    --#{$prefix}btn-hover-color: #{$white};
    --#{$prefix}btn-hover-bg: #{$bg};
    --#{$prefix}btn-hover-border-color: #{$bg};
    --#{$prefix}btn-active-color: #{$white};
    --#{$prefix}btn-active-bg: #{$bg};
    --#{$prefix}btn-active-border-color: #{$bg};
    --#{$prefix}btn-disabled-color: #{$white};
    --#{$prefix}btn-disabled-bg: #{$bg};
    --#{$prefix}btn-disabled-border-color: #{$bg};
    --#{$prefix}btn-focus-shadow-rgb: 0 0 0 $btn-focus-width rgba($bg, 0.5);
}


// Button Soft
@each $color,
$value in $theme-colors {
    .btn-soft-#{$color} {
        @include button-variant-soft($value);
    }
}


// Button Light and Dark
.btn-light {
    --#{$prefix}btn-color: var(--#{$prefix}dark);
    --#{$prefix}btn-bg: var(--#{$prefix}light);
    --#{$prefix}btn-border-color: var(--#{$prefix}light);
    --#{$prefix}btn-hover-color: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-bg: var(--#{$prefix}light);
    --#{$prefix}btn-hover-border-color: var(--#{$prefix}light);
    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark);
    --#{$prefix}btn-disabled-bg: var(--#{$prefix}light);
    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}light);
}

.btn-dark {
    --#{$prefix}btn-color: var(--#{$prefix}light);
    --#{$prefix}btn-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-border-color: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-color: var(--#{$prefix}light);
    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark);
    --#{$prefix}btn-disabled-color: var(--#{$prefix}light);
    --#{$prefix}btn-disabled-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}dark);
}

.btn-outline-dark {
    --#{$prefix}btn-color: var(--#{$prefix}dark);
    --#{$prefix}btn-bg: transparent;
    --#{$prefix}btn-border-color: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-color: var(--#{$prefix}light);
    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark);
    --#{$prefix}btn-active-color: var(--#{$prefix}light);
    --#{$prefix}btn-active-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-active-border-color: var(--#{$prefix}dark);
    --#{$prefix}btn-disabled-color: var(--#{$prefix}light);
    --#{$prefix}btn-disabled-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}dark);
}

.btn-outline-light {
    --#{$prefix}btn-color: var(--#{$prefix}dark);
    --#{$prefix}btn-bg: transparent;
    --#{$prefix}btn-border-color: var(--#{$prefix}light);
    --#{$prefix}btn-hover-color: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-bg: var(--#{$prefix}light);
    --#{$prefix}btn-hover-border-color: var(--#{$prefix}light);
    --#{$prefix}btn-active-color: var(--#{$prefix}dark);
    --#{$prefix}btn-active-bg: var(--#{$prefix}light);
    --#{$prefix}btn-active-border-color: var(--#{$prefix}light);
    --#{$prefix}btn-disabled-color: var(--#{$prefix}dark);
    --#{$prefix}btn-disabled-bg: var(--#{$prefix}light);
    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}light);
}

.btn-soft-dark {
    --#{$prefix}btn-color: var(--#{$prefix}dark);
    --#{$prefix}btn-bg: var(--#{$prefix}light);
    --#{$prefix}btn-border-color: var(--#{$prefix}light);
    --#{$prefix}btn-hover-color: var(--#{$prefix}light);
    --#{$prefix}btn-hover-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-hover-border-color: var(--#{$prefix}dark);
    --#{$prefix}btn-active-color: var(--#{$prefix}light);
    --#{$prefix}btn-active-bg: var(--#{$prefix}dark);
    --#{$prefix}btn-active-border-color: var(--#{$prefix}dark);
}

// Dark Mode
html[data-bs-theme="dark"] {
    .btn-light {
        --#{$prefix}btn-active-color: var(--#{$prefix}dark);
        --#{$prefix}btn-active-bg: var(--#{$prefix}border-color);
        --#{$prefix}btn-active-border-color: var(--#{$prefix}border-color);
    }

    .btn-dark {
        --#{$prefix}btn-active-color: var(--#{$prefix}light);
        --#{$prefix}btn-active-bg: var(--#{$prefix}tertiary-color);
        --#{$prefix}btn-active-border-color: var(--#{$prefix}tertiary-color);
    }
}