.btn-primary {
    color: var(--fresk-dm-primary-contrast, #fff);
    background-color: var(--fresk-primary);
    border-color: var(--fresk-primary);
    border-radius: 3px !important;
    font-size: 14px;
    &.search-icon {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
}

.btn-primary:hover {
    color: var(--fresk-dm-primary-contrast, #fff);
    background-color: var(--fresk-primary);
    filter: brightness(90%);
    border-color: var(--fresk-primary);
}

.btn-primary:focus, .btn-primary.focus {
    color: var(--fresk-dm-primary-contrast, #fff);
    background-color: var(--fresk-primary);
    filter: brightness(90%);
    border-color: var(--fresk-primary);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: var(--fresk-dm-text, #{$graytext}) !important;
    background-color: var(--fresk-dm-surface-strong, #ced4da);
    border-color: var(--fresk-dm-surface-strong, #ced4da);
    pointer-events: none !important;
    cursor: default !important;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: var(--fresk-dm-primary-contrast, #fff);
    background-color: var(--fresk-primary);
    border-color: var(--fresk-primary);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(51, 130, 201, 0.5);
}

.btn-secondary {
    color: var(--fresk-dm-secondary-contrast, #fff) !important;
    background-color: var(--fresk-secondary);
    border-color: var(--fresk-secondary);
    border-radius: 3px !important;
    font-size: 14px;
}
.fp-viewbar:not(.disabled) a.btn-secondary.checked {
    color: #000 !important;
}
.btn-link:not(.p-0) {
    padding: .5rem !important;
}
.btn-link:not(.block-add, .add-sections, .activity-add), .page-link:hover {
    color: var(--fresk-primary-text) !important;
}
.btn.add-section {
    color: var(--fresk-dm-secondary-contrast, #FFFFFF);
}
.btn-secondary:hover {
    color: var(--fresk-dm-secondary-contrast, #fff) !important;
    background-color: var(--fresk-secondary);
    filter: brightness(90%);
    border-color: var(--fresk-secondary);
}

.btn-secondary:focus, .btn-secondary.focus {
    color: var(--fresk-dm-secondary-contrast, #fff) !important;
    background-color: var(--fresk-secondary);
    filter: brightness(90%);
    border-color: var(--fresk-secondary);
}

.btn-secondary.disabled, .btn-secondary:disabled {
    color: var(--fresk-dm-text, #{$graytext}) !important;
    background-color: var(--fresk-dm-surface-strong, #ced4da);
    border-color: var(--fresk-dm-surface-strong, #ced4da);
    pointer-events: none !important;
    cursor: default !important;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
    color: var(--fresk-dm-secondary-contrast, #fff);
    background-color: var(--fresk-secondary);
    border-color: var(--fresk-secondary);
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(179, 185, 191, 0.5);
}

.btn.btn-outline-secondary {
    border-color: transparent;
    border-radius: 4px;
    color: var(--fresk-secondary-text);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    @include fresk-dark {
        border-color: var(--fresk-dm-border-strong);
    }
    &:active,
    &:hover {
        background-color: var(--fresk-dm-surface-hover, #{$grayhover}) !important;
        color: var(--fresk-dm-secondary-text-hover, var(--fresk-secondary-text)) !important;
        border-color: transparent !important;
        @include fresk-dark {
            border-color: var(--fresk-dm-border-strong) !important;
        }
    }
    &:focus {
        border-color: var(--fresk-secondary-ui);
        background-color: var(--fresk-dm-surface, white);
        color: var(--fresk-secondary-text);
    }
}

.btn.btn-outline-secondary.dropdown-toggle{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.06) !important;
}

.btn.btn-primary.dropdown-toggle{
    color: var(--fresk-dm-primary-contrast, #fff) !important;
}
.btn.btn-primary.dropdown-toggle {
    &:hover,
    &:focus {
        color: var(--fresk-dm-primary-text-hover, var(--fresk-primary-text)) !important;
        background: var(--fresk-dm-surface-hover, #f5f5f8) !important;
    }
}

.btn.btn-primary.dropdown-toggle:focus{
    border-color: var(--fresk-primary-ui) !important;
}

.btn.btn-secondary.dropdown-toggle {
    &:hover,
    &:focus {
        color: var(--fresk-dm-secondary-text-hover, var(--fresk-secondary-text)) !important;
        background: var(--fresk-dm-surface-hover, #f5f5f8) !important;
    }
}

.btn.dropdown-toggle{
    &:hover,
    &:focus{
        background-color: transparent !important;
        border-color: transparent !important;
    }
    box-shadow: none !important;
}
.btn-danger {
    color: $alert-dangertext !important;
    background-color: $alert-danger;
    border-color: $alert-danger;
    border-radius: 3px !important;
    font-size: 14px;
    @include fresk-dark {
        color: var(--bs-danger-text-emphasis) !important;
        background-color: var(--bs-danger-bg-subtle);
        border-color: var(--bs-danger-border-subtle);
    }
}

body.theme-fresk.path-course {
    .btn.dropdown-toggle.btn-subtle-success {
        color: #1b3d19 !important;
        display: flex;
        align-items: center;
        gap: 2px;
        @include fresk-dark {
            color: var(--bs-success-text-emphasis) !important;
        }
        &:hover,
        &:focus {
            color: var(--fresk-dm-secondary-text-hover, var(--fresk-secondary-text)) !important;
            background: var(--fresk-dm-surface-hover, #f5f5f8) !important;
        }
    }
}
button.block-button.btn {
    color: var(--fresk-primary-text);
    background-color: transparent;
    font-weight: 600;
    font-size: 12px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    &:hover{
        background-color: rgba(var(--fresk-primary-rgb), 0.08);
    }
    &:active {
        color: color-mix(in oklab, var(--fresk-dm-primary-text-hover, var(--fresk-primary-text)) 96%, black);
        background-color: rgba(var(--fresk-primary-rgb), 0.08);
    }
}