// form elements
.form-control {
    padding: 0.4rem;
    line-height: normal;
}
.form-control:invalid {
    background: #ffaaaa80;
}
[data-bs-theme="dark"] {
    .form-control:invalid {
        background: #ff666680;
    }
}
.form-group .control-label {
    font-weight: bold;
    margin-top: auto;
    margin-bottom: auto;
}
@include media-breakpoint-up(md) {
    .form-group .control-label {
        text-align: right;
    }
}
.form-inline {
    // don't use flexbox here, this would break too much of our forms
    display: block;
}

// enhance style buttons on hover and focus
@mixin btn($class,$bg) {
    .btn-#{$class} {
        background-size: 200% 200%;
        background-position: 50%;

        &:focus {
            background-color: $bg;
        }

        &:hover,
        &:active:hover {
            background-color: darken($bg, 6%);
        }

        &:active {
            background-color: darken($bg, 12%);
            @include gradient-radial(darken($bg, 12%) 10%, $bg 11%);
            background-size: 1000% 1000%;
            @include box-shadow(2px 2px 4px rgba(0,0,0,.4));
        }
    }
}
.btn {
    border: none;
    @include box-shadow(1px 1px 4px rgba(0,0,0,.4));
    @include transition(all 0.4s);

    &-link {
        border-radius: $btn-border-radius-base;
        @include box-shadow(none);
        color: $btn-default-color;
        &:hover,
        &:focus {
            @include box-shadow(none);
            color: $btn-default-color;
            text-decoration: none;
        }
    }
    &-default.disabled {
        background-color: rgba(0, 0, 0, 0.1);
        color: rgba(0, 0, 0, 0.4);
        opacity: 1;
    }
}
.btn-group {
    .btn + .btn,
    .btn + .btn-group,
    .btn-group + .btn,
    .btn-group + .btn-group {
        margin-left: 0;
    }
    &-vertical {
        > .btn + .btn,
        > .btn + .btn-group,
        > .btn-group + .btn,
        > .btn-group + .btn-group {
            margin-top: 0;
        }
    }
}
.darkmode {
    .btn.btn-light {
        background-color: #070605;
        border-color: #070605;
    }
}

// wells (used for comments)
.well-lg {
    padding: 24px;
    border-radius: 3px;
}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fdfdfd;
    border: 1px solid #e3e3e3;
    border-radius: 1px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
[data-bs-theme="dark"] .well {
    background-color: $default-bg-color-dark;
    border-color: #1c1c1c;
}

// round images (used for comments) and badges inside summary
.img-circle {
    border-radius: 50%;
}

.editor-yaml-guide {
    text-align: left !important;
}

.darkmode {
    .custom-select {
        color: $default-font-color-dark;
        background-color: $default-bg-color-dark;
    }
}
