//
// Custom Main
//
// Add your own styles or override existing ones
//
// This file is included last, so you have access
// to all Bootstrap and Codebase functions/mixins/styles etc
// --------------------------------------------------

// If you have many custom styles, you can create and import additional files
// For example you can create _component1.scss and include it as follows:
// @import 'component1';

// Your custom skin
@import "../bootstrap/functions";
@import "variables";
@import "../bootstrap/mixins";
@import "../bootstrap/utilities";

$all-colors: map-merge-multiple($grays);

$utilities: map-merge(
        $utilities,
        (
            "color": map-merge(
                    map-get($utilities, "color"),
                    (
                        values: map-merge(
                                map-get(map-get($utilities, "color"), "values"),
                                    (
                                        $all-colors
                                    ),
                        ),
                    ),
            ),
            "background-color": map-merge(
                    map-get($utilities, "background-color"),
                    (
                        values: map-merge(
                                map-get(map-get($utilities, "background-color"), "values"),
                                    (
                                        $all-colors
                                    ),
                        ),
                    ),
            ),
        )
);

@import "../bootstrap/utilities/api";

@include bg-variant(".bg-secondary-light", $secondary-light);
@include bg-variant(".bg-secondary-lighter", $secondary-lighter);
@include bg-variant(".bg-success-lighter", $success-lighter);
@include bg-variant(".bg-info-lighter", $info-lighter);
@include bg-variant(".bg-warning-lighter", $warning-lighter);
@include bg-variant(".bg-danger-lighter", $danger-lighter);

@include text-emphasis-variant('.text-secondary-dark', $secondary-dark);
@include text-emphasis-variant('.text-secondary-darker', $secondary-darker);
@include text-emphasis-variant('.text-success-dark', $success-dark);
@include text-emphasis-variant('.text-success-darker', $success-darker);
@include text-emphasis-variant('.text-info-dark', $info-dark);
@include text-emphasis-variant('.text-info-darker', $info-darker);
@include text-emphasis-variant('.text-warning-dark', $warning-dark);
@include text-emphasis-variant('.text-warning-darker', $warning-darker);
@include text-emphasis-variant('.text-danger-dark', $danger-dark);
@include text-emphasis-variant('.text-danger-darker', $danger-darker);

.btn-secondary {
    @include button-variant($secondary, $secondary);
}

.btn-alt-secondary {
    @include button-variant(tint-color($secondary, 75%), tint-color($secondary, 75%), shade-color($secondary, 40%), tint-color($secondary, 50%), tint-color($secondary, 50%), shade-color($secondary, 60%));
}

.btn-outline-gray {
    @include button-outline-variant($gray-300);
}

.bg-unset {
    background: unset !important;
}

.nav-main-submenu .nav-main-link:hover, .nav-main-submenu .nav-main-link:focus {
    color: $primary;
}

.nav-main-submenu .nav-main-link.active {
    color: $primary-darker;
}

.nav-tabs-block .nav-link.active,
.nav-tabs-block .nav-item.show .nav-link {
    color: $primary;
}

.text-ellipsis {
    text-overflow: ellipsis;
}

.text-preline {
    white-space: pre-line;
}

.form-floating {
    .form-select {
        ~ label {
            color: $primary;
        }
    }

    .form-control:not(:placeholder-shown) {
        ~ label {
            color: $primary;
        }
    }

    .form-control:not(:placeholder-shown):disabled {
        ~ label {
            color: $gray-700;
        }
    }

    textarea.form-control {
        height: auto;
    }
}

.form-control[readonly] {
    background-color: $input-disabled-color;
    color: $gray-700;
}

.form-control:disabled {
    background-color: $input-disabled-color;
    color: $gray-700;
}

// Select2 ReadOnly
select[readonly].select2-hidden-accessible + .select2-container {
    pointer-events: none;
    touch-action: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection {
    background: #eee;
    box-shadow: none;
}

select[readonly].select2-hidden-accessible + .select2-container .select2-selection__arrow, select[readonly].select2-hidden-accessible + .select2-container .select2-selection__clear {
    display: none;
}

.table {
    font-size: 0.9rem;

    thead th {
        text-transform: uppercase;
        letter-spacing: .0625em;
        font-size: $font-size-sm;
        padding: $table-cell-padding-x $table-cell-padding-y;
    }
}

@media only screen and (max-width: 767px) {
    .table.table-rtc {
        min-width: 100%;
    }
    .table.table-rtc > tbody > tr > td,
    .table.table-rtc > tbody > tr > th {
        display: block;
    }
    .table.table-rtc > thead > tr > td,
    .table.table-rtc > thead > tr > th,
    .table.table-rtc > tfoot > tr > td,
    .table.table-rtc > tfoot > tr > th {
        display: none;
    }
    .table.table-rtc tr {
        border-bottom: 1px solid #ccc;
    }
    .table.table-rtc td:before {
        content: attr(data-title);
    }

    table.table-rtc-2 {
        min-width: 100%;
    }
    .table.table-rtc-2 > tbody > tr > td:nth-child(odd),
    .table.table-rtc-2 > tbody > tr > th:nth-child(odd) {
        display: inline-block;
        width: 100% !important;
        border-bottom: none;
        font-size: smaller;
        padding-bottom: 0;
    }
    .table.table-rtc-2 > tbody > tr > td:nth-child(even),
    .table.table-rtc-2 > tbody > tr > th:nth-child(even) {
        display: block;
        width: 100% !important;
        padding-top: 0;
        clear: both;
    }
}