.btn.fas {
    font-weight: 900;
}
.btn.far {
    font-weight: 400;
}

.btn-light {
    border-color: $medium-gray;
}
.btn-light:focus-visible {
    box-shadow: 0 0 0 $btn-focus-width rgba($dark-gray, 0.5);
}
.btn-light.active,
.btn-light:active,
input:checked + label.btn-light.for-above {
    border-color: $dark-gray;
    background-color: $light-gray;
    box-shadow: inset 0 0 5px $dark-gray;
}
.btn-light:hover,
.btn-check + .btn-light:hover {
    border-color: $dark-gray;
}
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
    border-color: $dark-gray;
}
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active {
    border-color: $dark-gray;

    &:focus-visible {
        box-shadow: inset 0 0 5px $dark-gray, 0 0 0 $btn-focus-width rgba($dark-gray, 0.5);
    }
}

button:not(:disabled) {
    cursor: pointer;
}

a:not([href]):not(.disabled) {
    cursor: pointer;
}

@include button-disabled-variant(".btn-primary", $evap-dark-blue, $evap-light-blue);
@include button-disabled-variant(".btn-secondary", $dark-gray, $light-gray);
@include button-disabled-variant(".btn-success", shade-color($evap-green, 25%), $evap-light-green);
@include button-disabled-variant(".btn-danger", $evap-red, $evap-light-red);
@include button-disabled-variant(".btn-warning", shade-color($evap-dark-yellow, 25%), $evap-light-yellow);
@include button-disabled-variant(".btn-info", shade-color($evap-light-blue, 40%), tint-color($evap-light-blue, 10%));
@include button-disabled-variant(".btn-light", $medium-gray, $lighter-gray);
@include button-disabled-variant(".btn-dark", $white, $dark-gray, $darker-gray);

.btn-switch {
    display: inline-flex;
    background-color: tint-color($light-gray, 4%);
    border-radius: 0.2rem;

    .btn-toolbar {
        background: $white;
    }

    .btn-group {
        background: tint-color($light-gray, 4%);

        &::before {
            width: 0.5rem;
            content: "";
        }
    }
}
.btn-switch-light {
    background-color: $lighter-gray;

    .btn-group {
        background: $lighter-gray;
    }
}
.btn-switch-label {
    display: inline-block;
    font-weight: normal;
    white-space: nowrap;
    vertical-align: middle;
    color: $darker-gray;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    font-size: 0.875rem;
}
.icon-buttons {
    .btn {
        min-width: 2.3em;
    }

    .btn-lg {
        padding: 0.15em 0;
    }
}

.btn-sm-narrow {
    line-height: 1;
}

.btn-switch-navbar {
    display: inline-flex;
    padding: 0.5rem 0.75rem;

    .btn-group {
        border: $darker-gray 1px solid;
        border-radius: 0.2rem;
        overflow: hidden;

        .btn {
            border: none;
            border-radius: 0;
            padding: 0 0.25rem;
            background-color: tint-color($darker-gray, 10%);
            color: $light-gray;
            transition: none;
            min-width: 28px;
            margin-left: 0;

            &:hover {
                background-color: tint-color($darker-gray, 20%);
                color: $white;
            }

            &.active {
                background-color: tint-color($darker-gray, 10%);
                color: $medium-gray;
                box-shadow: inset 0 0 10px shade-color($darker-gray, 40%);
                opacity: 1;
            }
        }
    }
}

.btn-switch-evaluation-language {
    .btn-group {
        .btn {
                min-width: 38px;
        }
    }
}

.feedback-button {
    @include media-breakpoint-up(md) {
        position: fixed;
        right: 10px;
        bottom: 8px;
        z-index: $zindex-fixed;
    }

    .btn-dark {
        padding: 0 0.2rem;
        color: $light-gray;
    }
}
.feedback-button-placeholder {
    min-width: 140px;
}

@media screen and (min-aspect-ratio: $notebook-break) {
    .button-open-notebook {
        position: fixed;
        bottom: $footer-height + 20px;
        z-index: $zindex-fixed;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

@media screen and (max-aspect-ratio: $notebook-break) {
    .button-open-notebook {
        margin-top: 1rem;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}

.login-button {
    width: 100%;
    max-width: 16em;
}

.btn.vote-btn {
    width: 6rem;
    height: 2.5rem;
    padding: 0.25rem;
    font-size: 0.85rem;
    white-space: normal;
    line-height: 1rem;
    border-color: $medium-gray !important;

    &:last-child {
        width: 3.5rem;
    }

    .btn-check:focus-visible + & {
        box-shadow: 0 0 0 $input-btn-focus-width rgba($evap-dark-blue, 0.25);
    }

    .vote-type-bipolar &:not(:last-child) {
        width: 5rem;
        font-size: 0.8rem;
    }
}

textarea,
button,
a.collapse-toggle {
    &.tab-selectable:focus-visible {
        outline: none;
        box-shadow: 0 0 0 $input-btn-focus-width rgba($evap-dark-blue, 0.25);
    }
}

@include media-breakpoint-up(md) {
    .vote-btn {
        margin-top: 0;
    }

    .vote-type-unipolar > .vote-btn:not(:last-child),
    .vote-type-bipolar > .vote-btn:not(:last-child) {
        width: 0;
        flex: auto;
    }
}

.vote-btn-text {
    position: relative;
    top: -1.2px;
}

@each $name, $color in $vote-colors {
    .btn.vote-btn-#{$name} {
        background-color: $lighter-gray;
        color: shade-color($color, 40%);

        &:hover {
            background-color: tint-color($color, 60%);
            color: shade-color($color, 40%);
        }
    }

    .btn-check:checked + .vote-btn-#{$name} {
        background-color: $color;
        color: shade-color($color, 60%);

        &:hover {
            background-color: tint-color($color, 30%);
        }
    }
}

.btn-group > .vote-btn {
    flex: 0 1 auto;
}

.btn-area {
    margin-bottom: -0.25rem;
    .btn {
        margin-bottom: 0.25rem;
    }
}

.btn-grade-download {
    align-self: flex-left;
}

.btn-textanswer {
    width: 2.5rem;
    height: 2.5rem;
    background-color: $lighter-gray;
    border-color: $medium-gray;

    & > .fa-comment {
        color: $darker-gray;
    }

    &.has-contents > .fa-comment {
        font-weight: 900;
    }

    box-shadow: inset 0 0 10px $dark-gray;

    &:focus-visible {
        box-shadow: $btn-focus-box-shadow, inset 0 0 10px $dark-gray;
    }

    &.collapsed {
        box-shadow: none;
    }
}

td .btn {
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}
