// bootstrap

// remove wrongly added padding by Bootstrap, caused by the always visible scrollbar
// (https://github.com/twbs/bootstrap/blob/v4-dev/js/src/modal.js#L429)
body, .fixed-top, .fixed-bottom, .is-fixed, .sticky-top {
    padding-right: 0 !important;
}

// make collapsed card have no double bottom border
// (bootstrap bug: https://github.com/twbs/bootstrap/issues/27108)
.collapsible {
    overflow: hidden;  // don't let background color overflow rounded border

    .card-header {
        border-bottom: none;
    }

    .card-body {
        border-top: 1px solid rgba(0, 0, 0, 0.125);
    }
}

// make buttons that really look like links
.btn-link {
    padding: 0;
    vertical-align: baseline;
    border: none;
    background-color: transparent;
}

// change btn text colors for better contrast
.btn-secondary {
    @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $disabled-color: $white);
}
.btn-outline-secondary {
    @include button-outline-variant($secondary, $color-hover: $white);
}
.btn-danger {
    @include button-variant($danger, $danger, $color: $white, $hover-color: $white, $disabled-color: $white);
}
.btn-outline-danger {
    @include button-outline-variant($danger, $color-hover: $white);
}

// accordion adjustments
.accordion-flush .accordion-item {
    border: 1px solid $dark-gray;

    &:last-child {
        border: 1px solid $dark-gray;
    }
}
.accordion-body ul {
    margin-bottom: 0;
}

// move accordion icon to the left
.accordion-button {
    &:not(.collapsed) {
        &::before {
            background-image: escape-svg($accordion-button-active-icon);
            transform: $accordion-icon-transform;
        }
    }

    &::after { display: none; }
    &::before {
        flex-shrink: 0;
        width: $accordion-icon-width;
        height: $accordion-icon-width;
        margin-right: 1rem;
        content: "";
        background-image: escape-svg($accordion-button-icon);
        background-repeat: no-repeat;
        background-size: $accordion-icon-width;
        @include transition($accordion-icon-transition);
    }
}

// remove horizontal line after "add another" in formsets
.dynamic-form-add td {
    border-bottom: none;
}

// explicitely set alert colors
$alert-colors: (
    "secondary" $light-gray $medium-gray,
    "success" $evap-light-green $evap-green,
    "info" $evap-light-blue $evap-dark-blue,
    "warning" $evap-light-yellow $evap-yellow,
    "danger" $evap-light-red $evap-red,
    "light" $lighter-gray $light-gray,
    "dark" $dark-gray $darker-gray
);
@each $name, $bg-color, $border-color in $alert-colors {
    .alert-#{$name} {
        background-color: $bg-color;
        border-color: $border-color;
        color: shade-color($border-color, 60%);
    }
}
.alert-primary {
    background-color: tint-color($evap-dark-blue, 50%);
    border-color: $evap-dark-blue;
    color: shade-color($evap-dark-blue, 50%);
}

// fix checkbox positions
.form-check:not(li) {
    padding-top: 0.25rem;
}

// datetimepicker adjustments
.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
    width: 33em;

    .datepicker {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .timepicker {
        flex: 0 0 40%;
    }
}

// tomselect adjustments
.ts-wrapper.multi .ts-control > div.active {
   background-color: $component-active-bg;
}

.focus .ts-control {
    border-color: $input-focus-border-color;
    box-shadow: $input-focus-box-shadow;
}

// Change .btn-group outlined border style to fix double borders with outlined button style
// see https://github.com/twbs/bootstrap/issues/25888
.btn-group.outline-fix {

    // If .btn is not the last element in the group, remove the right border.
    // Also uses :has to not remove the right border if the next element is a disabled input
    .btn:not(:last-child):has(+ :not(.btn-check[disabled])) {
        border-right: 0;
    }

    // Explicitly disable the left border of disabled .btn's to use the right border of the previous button.
    .btn-check[disabled] + .btn {
        border-left: 0;
    }

    // Revert Bootstrap's hack, that uses negative margin which would appear as double borders
    :not(.btn-check:first-child) + .btn {
        margin-left: unset;
    }
}
