.border-secondary {
    border-color: $gray-300 !important;
}


// Alerts

.alert-secondary {
    border-color: $gray-300;
}


// Badges

.badge {
    padding-top: 0.25em;
    padding-bottom: 0.3em;

    &.badge-secondary,
    &.bg-secondary {
        border: 1px solid #444444;
        color: #444444;
    }
}

// Breadcrumbs

.breadcrumb {
    font-size: 1rem;
}

.breadcrumb-item {
    font-weight: $theme-font-weight-semibold;
}

.breadcrumb-item a {
    color: $primary;
}


// Buttons + Forms

.btn:not(.btn-link).disabled,
.btn:not(.btn-link):disabled {
    @include box-shadow($btn-box-shadow);
}

@each $color, $value in $theme-colors {
    .btn-outline-#{$color} {
        border-width: 2px;
    }
}

.btn-outline-secondary {
    @include button-outline-variant(#444444);
}

/* bs5 */
:not([class*="input-group"]) > .btn-secondary:focus,
:not([class*="input-group"]) > .btn-secondary.focus,
:not([class*="input-group"]) > .btn-secondary:not(:disabled):not(.disabled):hover {
    background-color: #ececec;
    border-color: #e6e6e6;
}

.btn-secondary:focus:not(:disabled):not(.disabled),
.btn-secondary.focus:not(:disabled):not(.disabled) {
    @if $enable-shadows {
        box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(#444444, .2) !important;
    } @else {
        box-shadow: 0 0 0 $btn-focus-width rgba(#444444, .2) !important;
    }
}

.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
    color: #212529;
    background-color: #e6e6e6;
    border-color: #dfdfdf
}

.btn.dropdown-toggle {
    & {
        padding: 0.4rem 0.8rem;
    }

    &.btn-sm {
        padding: $btn-padding-y-sm $btn-padding-x-sm;
    }

    &.btn-lg {
        padding: $btn-padding-y-lg $btn-padding-x-lg;
    }
}

.btn-group {
    border-radius: $theme-border-radius;
}

.btn-group-vertical > .btn {
    @include border-radius($theme-border-radius-sm);
}

.btn-group-vertical {
    border-radius: $theme-border-radius-sm;
}

.btn-group,
.btn-group-vertical {
    &:not(.dxbs-toolbar-search-group):not(.dxbs-ta-ag) {
        box-shadow: $theme-box-shadow;

        .btn-group,
        .btn-group-vertical {
            box-shadow: none;
        }

        .btn:not(:focus) {
            box-shadow: none !important;
        }
    }

    .btn:disabled,
    .btn.disabled:hover,
    .btn.disabled:focus {
        z-index: auto;
    }

    .btn-secondary:not(.active):not(:active):not(.disabled):not(disabled):hover {
        border-color: transparent;
    }
}

@mixin btn-left-divider($color) {
    position: relative;
    &:not(.active):not(:active) {
        &:before {
            content: "";
            position: absolute;
            top: calc(-1 * #{$btn-border-width});
            left: -1px;
            height: calc(100% + 2 * #{$btn-border-width});
            width: $btn-border-width;
            background-color: $color;
        }
    }
}

@mixin btn-right-divider($color) {
    position: relative;
    &:not(.active):not(:active) {
        &:not(.dropdown-toggle):after {
            content: "";
            position: absolute;
            top: calc(-1 * #{$btn-border-width});
            right: -1px;
            height: calc(100% + 2 * #{$btn-border-width});
            width: $btn-border-width;
            background-color: $color;
        }
    }
}

@mixin btn-top-divider($color) {
    position: relative;
    &:not(.active):not(:active):before {
        content: "";
        position: absolute;
        top: -1px;
        left: calc(-1 * #{$btn-border-width});
        height: 1px;
        width: calc(100% + 2 * #{$btn-border-width});
        background-color: $color;
    }
}

@mixin btn-bottom-divider($color) {
    position: relative;
    &:not(.dropdown-toggle):after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: calc(-1 * #{$btn-border-width});
        height: 1px;
        width: calc(100% + 2 * #{$btn-border-width});
        background-color: $color;
    }
}

.btn-group {
    @each $color, $value in $theme-colors {
        @if $color == "secondary" {
            & > .btn-secondary:not(:first-child),
            & > .btn-group:not(:first-child) > .btn-secondary:first-child {
                @include btn-left-divider(#eaeaea);
            }
            & > .btn-secondary:not(:last-child),
            & > .btn-group:not(:last-child) > .btn-secondary:last-child {
                @include btn-right-divider(#eaeaea);
            }
        } @else {
            & > .btn-#{$color}:not(:first-child),
            & > .btn-group:not(:first-child) > .btn-#{$color}:first-child {
                @include btn-left-divider(darken($value, 7.5%));
            }
            & > .btn-#{$color}:not(:last-child),
            & > .btn-group:not(:last-child) > .btn-#{$color}:last-child {
                @include btn-right-divider(darken($value, 7.5%));
            }
        }
    }
}

.btn-group-vertical {
    @each $color, $value in $theme-colors {
        @if $color == "secondary" {
            & > .btn-secondary:not(:first-child),
            & > .btn-group-vertical:not(:first-child) > .btn-secondary:first-child {
                @include btn-top-divider(#eaeaea);
            }
            & > .btn-secondary:not(:last-child),
            & > .btn-group-vertical:not(:last-child) > .btn-secondary:last-child {
                @include btn-bottom-divider(#eaeaea);
            }
        } @else {
            & > .btn-#{$color}:not(:first-child),
            & > .btn-group-vertical:not(:first-child) > .btn-#{$color}:first-child {
                @include btn-top-divider(darken($value, 7.5%));
            }
            & > .btn-#{$color}:not(:last-child),
            & > .btn-group-vertical:not(:last-child) > .btn-#{$color}:last-child {
                @include btn-bottom-divider(darken($value, 7.5%));
            }
        }
    }
}


// Cards

.card {
    @include box-shadow($theme-box-shadow-xs);
}

.card.text-white.bg-secondary {
    color: $gray-800 !important;
}


// Checkboxes

.custom-checkbox,
.custom-radio {
    .custom-control-input:not(:checked):not(:indeterminate) ~ .custom-control-label::before {
        border: 2px solid rgba(0, 0, 0, 0.2);
    }

    .custom-control-input:not(:checked):not(:indeterminate):not(:disabled) ~ .custom-control-label::before {
        background-color: white;
        box-shadow: none;
    }

    .custom-control-input:disabled ~ .custom-control-label::before {
        background-color: rgba(204, 204, 204, 0.4);
        box-shadow: none;
    }
}

// Switches

.custom-switch .custom-control-label::after {
    border-radius: 50%;
    top: 0.1rem;
    left: -2.375rem;
}

.custom-switch .custom-control-label::before {
    height: 0.875rem;
    top: calc(.16rem + 2px);
    background-color: #000;
    border-color: #000;
    opacity: 0.3;
}

.custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: #000;
    border-color: #000;
    opacity: 0.1;
}

.custom-switch .custom-control-input:checked:disabled ~ .custom-control-label::after,
.custom-switch .custom-control-input:disabled ~ .custom-control-label::after {
    background-color: #eeeeee !important;
}

.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #000;
    opacity: 0.3;
}

.custom-switch .custom-control-label::after {
    box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.3);
    background-color: #fff;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #7989ff;
}

// Forms

.form-control:focus {
    border-color: $blue !important;
}

.form-control,
.custom-select,
.custom-file > .custom-file-label {
    border-top: 0;
    border-left: 0;
    border-right: 0 transparent;
}

select.form-control > option:checked,
.custom-select > option:checked {
    background-color: $blue;
    color: white;
}

.custom-file > .custom-file-label::after {
    border-left: 0;
}

.input-group > .input-group-prepend,
.input-group > .dxbs-input-group-append, /* bz */
.input-group > .input-group-append {
    margin-right: 0;
    margin-left: 0;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .btn,
.input-group > .dxbs-input-group-append > .btn, /* bz */
.input-group > .dxbs-input-group-append > .input-group-text, /* bz */
.input-group > .btn, /* bs5 */
.input-group > .input-group-text, /* bs5 */
.input-group > .input-group-append > .input-group-text {
    background-color: $input-bg;
    background-clip: padding-box;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: $input-border-width solid $input-border-color;
    margin-right: 0;
    margin-left: 0;
}

.input-group > .input-group-prepend > .btn,
.input-group > .dxbs-input-group-append > .btn, /* bz */
.input-group > .btn, /* bs5 */
.input-group > .input-group-append > .btn {
    @include border-radius($input-border-radius);

    box-shadow: none !important;
    color: $gray-700;
    padding-top: $input-btn-padding-y;
    padding-bottom: $input-btn-padding-y;
}

.input-group > .input-group-prepend > .btn,
.input-group > .dxbs-input-group-append:not(:last-child) > .btn, /* bz */
.input-group > .dxbs-input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), /* bz */
.input-group > .btn:not(:last-child):not(.dropdown-toggle), /* bs5 */
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
    @if mixin-exists("border-right-radius") {
        @include border-right-radius(0);
    }
    @if mixin-exists("border-end-radius") {
        @include border-end-radius(0);
    }
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .dxbs-input-group-append > .btn, /* bz */
.input-group > .btn:not(:first-child), /* bs5 */
.input-group > .input-group-prepend:first-child > .btn:not(:first-child) {
    @if mixin-exists("border-left-radius") {
        @include border-left-radius(0);
    }
    @if mixin-exists("border-start-radius") {
        @include border-start-radius(0);
    }
}

.input-group > .input-group-prepend > .btn.focus:not(:disabled):not(.disabled),
.input-group > .input-group-prepend > .btn:focus:not(:disabled):not(.disabled),
.input-group > .dxbs-input-group-append > .btn.focus:not(:disabled):not(.disabled), /* bz */
.input-group > .dxbs-input-group-append > .btn:focus:not(:disabled):not(.disabled), /* bz */
.input-group > .btn.focus:not(:disabled):not(.disabled), /* bs5 */
.input-group > .btn:focus:not(:disabled):not(.disabled), /* bs5 */
.input-group > .input-group-append > .btn.focus:not(:disabled):not(.disabled),
.input-group > .input-group-append > .btn:focus:not(:disabled):not(.disabled) {
    box-shadow: none !important;
}

.input-group > .input-group-prepend > .btn:hover,
.input-group > .dxbs-input-group-append > .btn:hover, /* bz */
.input-group > .btn:hover, /* bs5 */
.input-group > .input-group-append > .btn:hover {
    background-color: rgba(0, 0, 0, 0.16);
    color: $gray-700;
}

.input-group > .input-group-prepend > .btn.active,
.input-group > .input-group-prepend > .btn:active,
.input-group > .dxbs-input-group-append > .btn.active, /* bz */
.input-group > .dxbs-input-group-append > .btn:active, /* bz */
.input-group > .btn.active, /* bs5 */
.input-group > .btn:active, /* bs5 */
.input-group > .input-group-append > .btn.active,
.input-group > .input-group-append > .btn:active {
    background-color: rgba(0, 0, 0, 0.20);
    border-bottom: $input-border-width solid $input-border-color;
    box-shadow: none !important;
    color: $gray-700;
}

.input-group > :not(:first-child) { /* bs5 */
    margin-left: 0 !important;
}


// Jumbotron

.jumbotron {
    border-radius: $theme-border-radius-sm;
}


// Modal

.modal-header {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}


// Navbar

.navbar {
    @include box-shadow($theme-box-shadow-sm);
}

.navbar.bg-dark input[type=text],
.navbar.bg-dark input[type=password],
.navbar.bg-primary input[type=text],
.navbar.bg-primary input[type=password] {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

.navbar.bg-dark input[type=text]:focus,
.navbar.bg-dark input[type=password]:focus,
.navbar.bg-primary input[type=text]:focus,
.navbar.bg-primary input[type=password]:focus {
    border-color: rgba(255, 255, 255, 0.6);
}

.navbar.bg-dark input[type=text]:disabled,
.navbar.bg-dark input[type=password]:disabled,
.navbar.bg-primary input[type=text]:disabled,
.navbar.bg-primary input[type=password]:disabled {
    background-color: rgba(255, 255, 255, 0.03);
}

.navbar.bg-dark input[type=text]::placeholder,
.navbar.bg-dark input[type=password]::placeholder,
.navbar.bg-primary input[type=text]::placeholder,
.navbar.bg-primary input[type=password]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}


// Navs

.nav .nav-link {
    font-weight: $theme-font-weight-semibold;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link.disabled {
    border-bottom: 2px solid $gray-300;
}

.nav-tabs .nav-link.active {
    border-bottom: 2px solid $blue;
}

.nav-tabs .nav-link,
.nav-tabs .nav-link.active {
    color: #444444;
}

.nav-pills.flex-column .nav-link {
    @include border-radius($theme-border-radius-sm);
}

.nav-pills .nav-item:not(.show) .nav-link:not(.disabled):not(.active) {
    color: $primary;
}


// Pagination

.pagination {
    @include border-radius($theme-border-radius);

    background-color: $gray-200;
    font-weight: $theme-font-weight-semibold;
    padding: 0.4rem;
}

.pagination .page-link {
    font-size: 1rem;
}

.pagination-sm .page-link {
    font-size: 0.88rem;
}

.pagination-lg .page-link {
    font-size: 1.1rem;
}

.pagination .page-link,
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link,
.pagination-lg .page-link,
.pagination-lg .page-item:first-child .page-link,
.pagination-lg .page-item:last-child .page-link,
.pagination-sm .page-link,
.pagination-sm .page-item:first-child .page-link,
.pagination-sm .page-item:last-child .page-link {
    @include border-radius($theme-border-radius);

    box-sizing: content-box;
    margin-left: 2px;
    line-height: 1rem;
    text-align: center;
    min-width: 1rem;
}
