// 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;
}


// Bootstrap 4 stable utilities
.p-1 {
    padding: @baseFontSize / 4 !important;
}
.p-2 {
    padding: @baseFontSize / 2 !important;
}
.p-3 {
    padding: @baseFontSize !important;
}
.p-4 {
    padding: @baseFontSize * 1.5 !important;
}

.pl-1,
.px-1 {
    padding-left: @baseFontSize / 4 !important;
}
.pl-2,
.px-2 {
    padding-left: @baseFontSize / 2 !important;
}
.pl-3,
.px-3 {
    padding-left: @baseFontSize !important;
}
.pl-4,
.px-4 {
    padding-left: @baseFontSize * 1.5 !important;
}
.pr-1,
.px-1 {
    padding-right: @baseFontSize / 4 !important;
}
.pr-2,
.px-2 {
    padding-right: @baseFontSize / 2 !important;
}
.pr-3,
.px-3 {
    padding-right: @baseFontSize !important;
}
.pr-4,
.px-4 {
    padding-right: @baseFontSize * 1.5 !important;
}
.pt-1,
.py-1 {
    padding-top: @baseFontSize / 4 !important;
}
.pt-2,
.py-2 {
    padding-top: @baseFontSize / 2 !important;
}
.pt-3,
.py-3 {
    padding-top: @baseFontSize !important;
}
.pt-4,
.py-4 {
    padding-top: @baseFontSize * 1.5 !important;
}
.pb-1,
.py-1 {
    padding-bottom: @baseFontSize / 4 !important;
}
.pb-2,
.py-2 {
    padding-bottom: @baseFontSize / 2 !important;
}
.pb-3,
.py-3 {
    padding-bottom: @baseFontSize !important;
}
.pb-4,
.py-4 {
    padding-bottom: @baseFontSize * 1.5 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0;
}
.ml-1,
.mx-1 {
    margin-left: @baseFontSize / 4 !important;
}
.ml-2,
.mx-2 {
    margin-left: @baseFontSize / 2 !important;
}
.ml-3,
.mx-3 {
    margin-left: @baseFontSize !important;
}
.ml-4,
.mx-4 {
    margin-left: @baseFontSize * 1.5 !important;
}
.mr-0,
.mx-0 {
    margin-right: 0;
}
.mr-1,
.mx-1 {
    margin-right: @baseFontSize / 4 !important;
}
.mr-2,
.mx-2 {
    margin-right: @baseFontSize / 2 !important;
}
.mr-3,
.mx-3 {
    margin-right: @baseFontSize !important;
}
.mr-4,
.mx-4 {
    margin-right: @baseFontSize * 1.5 !important;
}
.mb-0,
.my-0 {
    margin-bottom: 0;
}
.mb-1,
.my-1 {
    margin-bottom: @baseFontSize / 4 !important;
}
.mb-2,
.my-2 {
    margin-bottom: @baseFontSize / 2 !important;
}
.mb-3,
.my-3 {
    margin-bottom: @baseFontSize !important;
}
.mb-4,
.my-4 {
    margin-bottom: @baseFontSize * 1.5 !important;
}
.mt-0,
.my-0 {
    margin-top: 0;
}
.mt-1,
.my-1 {
    margin-top: @baseFontSize / 4 !important;
}
.mt-2,
.my-2 {
    margin-top: @baseFontSize / 2 !important;
}
.mt-3,
.my-3 {
    margin-top: @baseFontSize !important;
}
.mt-4,
.my-4 {
    margin-top: @baseFontSize * 1.5 !important;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}
.mr-auto,
.mx-auto {
    margin-right: auto !important;
}
.mt-auto,
.my-auto {
    margin-top: auto !important;
}
.mb-auto,
.my-auto {
    margin-bottom: auto !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%);
    }
    &-faded,
    &-light {
        background-color: #f8f9fa !important;
    }
    &-white {
        background-color: @white !important;
    }
    &-secondary {
        background-color: #e9ecef !important;
    }
}

.border-left {
    border-left: 1px solid #dee2e6 !important;
}
.border-right {
    border-right: 1px solid #dee2e6 !important;
}
.border-top {
    border-top: 1px solid #dee2e6 !important;
}
.border-bottom {
    border-bottom: 1px solid #dee2e6 !important;
}


.border-0 {
    border: 0 !important;
}
.border-top-0 {
    border-top: 0 !important;
}
.border-right-0 {
    border-right: 0 !important;
}
.border-bottom-0 {
    border-bottom: 0 !important;
}
.border-left-0 {
    border-left: 0 !important;
}

.w-100 {
    width: 100%;
}

.w-75 {
    width: 75%;
}

.w-50 {
    width: 50%;
}

.w-25 {
    width: 25%;
}

.d-flex {
    display: flex !important;
}

.flex-column {
    flex-direction: column !important;
}
.align-items-start {
    align-items: flex-start !important;
}

.align-items-center {
    align-items: center !important;
}
.h-100 {
    height: 100% !important;
}
.position-absolute {
    position: absolute !important;
}
.position-relative {
    position: relative !important;
}
.align-self-start {
    align-self: flex-start !important;
}
.align-self-center {
    align-self: center !important;
}
.align-items-center {
    align-items: center !important;
}
.align-self-stretch {
    align-self: stretch !important;
}
.justify-content-around {
    justify-content: space-around !important;
}
.flex-grow {
    flex-grow: 1;
}
.flex-shrink {
    flex-shrink: 1;
}

.rounded-circle {
    .border-radius(50%);
}
.rounded {
    .border-radius(4px);
}
.small {
    font-size: 75%;
}

.box-initial {
    box-sizing: initial;
    & * {
        box-sizing: initial;
    }
}
.box-border {
    box-sizing: border-box;
    & * {
        box-sizing: border-box;
    }
}
.list-group-item {
    background-color: @white;
    position: relative;
}
.list-group-item-action {
    &:hover,
    &:focus {
        background-color: #f8f9fa;
        text-decoration: none;
    }
}
.icon-size-3 {
    height: 36px !important;
    width: 36px !important;
    img {
        height: 16px !important;
        width: 16px !important;
    }
}
.icon-size-4 {
    height: 44px !important;
    width: 44px !important;
    img {
        height: 24px !important;
        width: 24px !important;
    }
}
.text-muted {
    .muted;
}
.dir-rtl {
    .dir-rtl-hide {
        display: none;
    }
}

.dir-ltr {
    .dir-ltr-hide {
        display: none;
    }
}