// Bootstrap 4 compatibility for bootstrapbased themes.
// Disable some stylelint rules which are necessary these compatbility classses.
/* stylelint-disable declaration-no-important, block-no-empty */

// Add support for card. We map it to well.
// This is not meant to be perfect - but at least applies some styles to a bs4 card.
.card {
    position: relative;
    display: block;
    margin-bottom: .75rem;
    background-color: #fff;
    border: 1px solid @wellBorder;
    border-radius: 0;
}

.card-header {
    padding: .75rem 1.25rem;
    background-color: @wellBackground;
    border-bottom: 1px solid @wellBorder;
}

.card-block {
    padding: 1.25rem;
}


// Due to lessphp limitations, the following classes must be declared statically without use of a loop.
.p-0 {
    padding: 0 !important;
}
.p-l-1 {
    padding-left: 1 * @baseFontSize !important;
}
.p-r-1 {
    padding-right: 1 * @baseFontSize !important;
}
.p-t-1 {
    padding-top: 1 * @baseFontSize !important;
}
.p-b-1 {
    padding-bottom: 1 * @baseFontSize !important;
}
.p-x-1 {
    padding-left: 1 * @baseFontSize !important;
    padding-right: 1 * @baseFontSize !important;
}
.p-y-1 {
    padding-top: 1 * @baseFontSize !important;
    padding-bottom: 1 * @baseFontSize !important;
}
.p-a-1 {
    padding: 1 * @baseFontSize !important;
}

.m-0 {
    margin: 0 !important;
}

.m-l-1 {
    margin-left: 1 * @baseFontSize !important;
}
.m-r-1 {
    margin-right: 1 * @baseFontSize !important;
}
.m-t-1 {
    margin-top: 1 * @baseFontSize !important;
}
.m-b-1 {
    margin-bottom: 1 * @baseFontSize !important;
}
.m-x-1 {
    margin-left: 1 * @baseFontSize !important;
    margin-right: 1 * @baseFontSize !important;
}
.m-y-1 {
    margin-top: 1 * @baseFontSize !important;
    margin-bottom: 1 * @baseFontSize !important;
}
.m-a-1 {
    margin: 1 * @baseFontSize !important;
}

.p-l-2 {
    padding-left: 2 * @baseFontSize !important;
}
.p-r-2 {
    padding-right: 2 * @baseFontSize !important;
}
.p-t-2 {
    padding-top: 2 * @baseFontSize !important;
}
.p-b-2 {
    padding-bottom: 2 * @baseFontSize !important;
}
.p-x-2 {
    padding-left: 2 * @baseFontSize !important;
    padding-right: 2 * @baseFontSize !important;
}
.p-y-2 {
    padding-top: 2 * @baseFontSize !important;
    padding-bottom: 2 * @baseFontSize !important;
}
.p-a-2 {
    padding: 2 * @baseFontSize !important;
}

.m-l-2 {
    margin-left: 2 * @baseFontSize !important;
}
.m-r-2 {
    margin-right: 2 * @baseFontSize !important;
}
.m-t-2 {
    margin-top: 2 * @baseFontSize !important;
}
.m-b-2 {
    margin-bottom: 2 * @baseFontSize !important;
}
.m-x-2 {
    margin-left: 2 * @baseFontSize !important;
    margin-right: 2 * @baseFontSize !important;
}
.m-y-2 {
    margin-top: 2 * @baseFontSize !important;
    margin-bottom: 2 * @baseFontSize !important;
}
.m-a-2 {
    margin: 2 * @baseFontSize !important;
}

.p-l-3 {
    padding-left: 3 * @baseFontSize !important;
}
.p-r-3 {
    padding-right: 3 * @baseFontSize !important;
}
.p-t-3 {
    padding-top: 3 * @baseFontSize !important;
}
.p-b-3 {
    padding-bottom: 3 * @baseFontSize !important;
}
.p-x-3 {
    padding-left: 3 * @baseFontSize !important;
    padding-right: 3 * @baseFontSize !important;
}
.p-y-3 {
    padding-top: 3 * @baseFontSize !important;
    padding-bottom: 3 * @baseFontSize !important;
}
.p-a-3 {
    padding: 3 * @baseFontSize !important;
}

.m-l-3 {
    margin-left: 3 * @baseFontSize !important;
}
.m-r-3 {
    margin-right: 3 * @baseFontSize !important;
}
.m-t-3 {
    margin-top: 3 * @baseFontSize !important;
}
.m-b-3 {
    margin-bottom: 3 * @baseFontSize !important;
}
.m-x-3 {
    margin-left: 3 * @baseFontSize !important;
    margin-right: 3 * @baseFontSize !important;
}
.m-y-3 {
    margin-top: 3 * @baseFontSize !important;
    margin-bottom: 3 * @baseFontSize !important;
}
.m-a-3 {
    margin: 3 * @baseFontSize !important;
}

.d-inline {
    display: inline !important;
}
.d-block {
    display: block !important;
}
.d-inline-block {
    display: inline-block !important;
}

// Horizontal centering.
.m-x-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

// Support img-fluid.
.img-fluid:extend(.img-responsive) {
}

// Text danger
.text-danger:extend(.text-error) {
}

.btn-secondary {
    background-color: @white;
    background-image: none;
    color: @black;
}

// Tags
.tag:extend(.label) {
    // Important (red)
    &-danger {
        background-color: @errorText;
    }
    &-danger[href] {
        background-color: darken(@errorText, 10%);
    }
    // Warnings (orange)
    &-warning {
        background-color: @orange;
    }
    &-warning[href] {
        background-color: darken(@orange, 10%);
    }
    // Success (green)
    &-success {
        background-color: @successText;
    }
    &-success[href] {
        background-color: darken(@successText, 10%);
    }
    // Info (turquoise)
    &-info {
        background-color: @infoText;
    }
    &-info[href] {
        background-color: darken(@infoText, 10%);
    }
    // Primary (blue)
    &-primary {
        background-color: @blue;
    }
    &-primary[href] {
        background-color: darken(@blue, 10%);
    }
}

// Floats
.pull-xs-left:extend(.pull-left) {
}

.pull-xs-right:extend(.pull-right) {
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-white {
    color: @white;
}

// Bg utilities.
.bg {
    // Important (red)
    &-danger {
        background-color: @errorText;
    }
    &-danger[href] {
        background-color: darken(@errorText, 10%);
    }
    // Warnings (orange)
    &-warning {
        background-color: @orange;
    }
    &-warning[href] {
        background-color: darken(@orange, 10%);
    }
    // Success (green)
    &-success {
        background-color: @successText;
    }
    &-success[href] {
        background-color: darken(@successText, 10%);
    }
    // Info (turquoise)
    &-info {
        background-color: @infoText;
    }
    &-info[href] {
        background-color: darken(@infoText, 10%);
    }
    // Primary (blue)
    &-primary {
        background-color: @blue;
    }
    &-primary[href] {
        background-color: darken(@blue, 10%);
    }
}

.bg-faded {
    background-color: @grayLighter;
}

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}