/* button */
.btn {
    --bs-btn-border-radius: var(--app-border-radius);
    font-weight: normal !important;
}
.btn-primary {
    --bs-btn-bg: var(--sc-color);
    --bs-btn-color: white;
    --bs-btn-border-color: #5a213c;
    --bs-btn-hover-bg: #843058;
    --bs-btn-hover-color: white;
    --bs-btn-hover-border-color: #5a213c;
    --bs-btn-active-bg: #843058;
    --bs-btn-active-color: white;
    --bs-btn-active-border-color: #5a213c;
}
.btn-secondary {
    --bs-btn-bg: #eaebeb;
    --bs-btn-color: black;
    --bs-btn-border-color: #c8c8c8;
    --bs-btn-hover-bg: #c8c8c8;
    --bs-btn-hover-color: black;
    --bs-btn-hover-border-color: #828282;
    --bs-btn-active-bg: #c8c8c8;
    --bs-btn-active-color: black;
    --bs-btn-active-border-color: #828282;
}
.btn-outline-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-color: #222;
    --bs-btn-border-color: var(--app-border-color);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-border-color: #ccc;
    --bs-btn-active-bg: #fcfcfc;
    --bs-btn-active-color: #000;
    --bs-btn-active-border-color: #ccc;
    --bs-btn-disabled-border-color: #eee;
}
.btn-primary,
.btn-secondary {
    font-weight: bold;
    border-top-width: 0;
    border-right-width: 0;
    border-bottom-width: .18em;
    border-left-width: 0;
}
.btn-disabled {
    opacity: .5;
    pointer-events: none;
    cursor: not-allowed;
}

/* dropdown */
.dropdown-menu {
    --bs-dropdown-border-color: var(--app-border-color);
    --bs-dropdown-border-radius: var(--app-border-radius);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .1);
    &:focus {
        outline: none;
    }
}

/* list-group */
.list-group {
    --bs-list-group-border-color: var(--app-border-color);
    --bs-list-group-border-radius: var(--app-border-radius);
}
.list-group-item:first-of-type {
    border-top-right-radius: inherit;
    border-top-left-radius: inherit;
}

/* form-control */
.form-control:not([type='checkbox']) {
    padding: .475rem .95rem;
    border-radius: var(--app-border-radius);
}
.form-check-input {
    background-color: var(--sc-color-bg);
}
label.form-check {
    margin-bottom: 0;
}
.form-check-input:checked {
    background-color: var(--sc-color);
}
.form-control:focus, .form-check-input:focus, .form-check-input:checked {
    border-color: var(--sc-color);
    box-shadow: 0 0 0 .25rem rgba(165, 60, 110, .25);
}
.form-switch .form-check-input {
    background: none !important;
    position: relative;
    top: -2px;
    width: 36px !important;
    height: 20px;
    border-radius: 12px !important;
    box-shadow: none !important;
    cursor: pointer;
    border-color: #ccc !important;
    margin-right: .54em;

    &:after {
        content: '';
        position: absolute;
        top: 1px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: #999;
        border-radius: 15px;
        transition: all 120ms ease;
    }

    &:checked {
        background-color: var(--sc-color-bg) !important;
        border-color: var(--sc-color) !important;
    }

    &:checked:after {
        left: 16px;
        background: var(--sc-color);
    }
}

    /* dropdown */
.dropdown-item {
    cursor: pointer;
}

/* badge */
.badge.bg-app {
    --bs-badge-padding-x: 0.85em;
    --bs-badge-padding-y: 0.55em;
    --bs-badge-color: var(--sc-color-dark);
    background-color: var(--sc-color-bg);
}

/* custom */
.btn-expanded { width: 100%; }
.shadow-xs { box-shadow: 0 .025rem .125rem rgba(0, 0, 0, 0.075); }
.flex-1 { flex: 1; }
.icon-sm { scale: .8 }
.d-center { display: flex; justify-content: center; align-items: center; }
.d-center-justify { display: flex; justify-content: center; }
.d-center-align { display: flex; align-items: center; }
.link-text { color: inherit; text-decoration: none; }
.text-left { text-align: left !important; }

@media (max-width: 575px) {.w-100-xs { min-width: 100% !important; width: 100% !important; }}
@media (max-width: 767px) {.w-100-sm { min-width: 100% !important; width: 100% !important; }}
@media (max-width: 991px) {.w-100-md { min-width: 100% !important; width: 100% !important; }}
@media (max-width: 1199px) {.w-100-lg { min-width: 100% !important; width: 100% !important; }}
@media (max-width: 1399px) {.w-100-xl { min-width: 100% !important; width: 100% !important; }}
@media (max-width: 1400px) {.w-100-xxl { min-width: 100% !important; width: 100% !important; }}