//
// bootstrap v3 -> v5-beta-1 update
//
// known open todos:
//
// "scaffold-toolbar" (top right)
//      - "Application Information" dropdown -> re-add colors
//
// forms module
//      - missing progress bar styling (create new form layer) + cancel btn position
//      - Step 2 "create new form layer" not working (JS loading spinner)
//
// Info module
//      - "Pagetree overview": wrong table thead background color
//      - "Page TSConfig" select + "Sort alphabetically" checkbox styling
//
// Backend Users module
//      - table missing bottom footer divider line
//
// Reports module
//      - Status report -> missing table 50-50 layout
//      - adjust green saturation?
//
// DB Check module
//      - Full search -> Advanced query -> fix form layouts

//// Mixins
@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
    border-color: $border;

    & > .panel-heading {
        color: $gray-700;
        background-color: $heading-bg-color;
        border-color: $heading-border;

        + .panel-collapse > .panel-body {
            border-top-color: $border;
        }

        .badge {
            color: $heading-bg-color;
            background-color: $heading-text-color;
        }
    }

    & > .panel-footer {
        + .panel-collapse > .panel-body {
            border-bottom-color: $border;
        }
    }
}

@mixin label-variant($color) {
    background-color: $color;

    &[href] {
        &:hover,
        &:focus {
            background-color: darken($color, 10%);
        }
    }
}

@mixin rotate($degrees) {
    -webkit-transform: rotate($degrees);
    -ms-transform: rotate($degrees); // IE9 only
    -o-transform: rotate($degrees);
    transform: rotate($degrees);
}

// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!
// [converter] $parent hack
@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
    #{$parent} {
        height: $input-height;
        padding: $padding-vertical $padding-horizontal;
        font-size: $font-size;
        line-height: $line-height;
        border-radius: $border-radius;
    }

    select#{$parent} {
        height: $input-height;
        line-height: $input-height;
    }

    textarea#{$parent},
    select[multiple]#{$parent} {
        height: auto;
    }
}

// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

@mixin form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
    // Color the label and help text
    .help-block,
    .control-label,
    .form-check-input,
    .radio,
    .checkbox,
    .radio-inline,
    .checkbox-inline,
    &.form-check-label,
    &.radio label,
    &.checkbox label,
    &.radio-inline label,
    &.checkbox-inline label {
        color: $text-color;
    }
    // Set the border and box shadow on specific inputs to match
    .form-control {
        border-color: $border-color;

        @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); // Redeclare so transitions work
        &:focus {
            border-color: darken($border-color, 10%);
            $shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($border-color, 20%);

            @include box-shadow($shadow);
        }
    }
    // Set validation states also for addons
    .input-group-addon {
        color: $text-color;
        background-color: $background-color;
        border-color: $border-color;
    }
    // Optional feedback icon
    .form-control-feedback {
        color: $text-color;
    }
}

//// Variables
$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
$grid-float-breakpoint: $screen-sm-min !default;
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
$popover-title-bg: darken($popover-bg, 3%) !default;

// Typography
$font-size-h1: $h1-font-size;
$font-size-h2: $h2-font-size;
$font-size-h3: $h3-font-size;
$font-size-h4: $h4-font-size;

// Components
$border-radius-base: $border-radius;
$border-radius-large: $border-radius-lg;
$border-radius-small: $border-radius-sm;

//== Labels
//
//##

////** Default label background color
$label-default-bg: $gray-300 !default;
////** Primary label background color
$label-primary-bg: $primary !default;
////** Success label background color
$label-success-bg: $success !default;
////** Info label background color
$label-info-bg: $info !default;
////** Warning label background color
$label-warning-bg: $warning !default;
////** Danger label background color
$label-danger-bg: $danger !default;

// Colors
// Contextual variations (linked labels get darker on :hover)

.label-default {
    @include label-variant($label-default-bg);
}

.label-primary {
    @include label-variant($label-primary-bg);
}

.label-success {
    @include label-variant($label-success-bg);
}

.label-info {
    @include label-variant($label-info-bg);
}

.label-warning {
    @include label-variant($label-warning-bg);
}

.label-danger {
    @include label-variant($label-danger-bg);
}

.hidden,
.hide {
    display: none !important;
}

.form-group {
    margin-bottom: 0.5rem;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.125rem;
    vertical-align: middle;
    border-top: 0.25rem dashed $gray-700;
    border-right: 0.25rem solid transparent;
    border-left: 0.25rem solid transparent;
}

.text-right {
    text-align: right;
}

.input-lg {
    height: 2.5rem;
}

// todo add "form-label" class to each <label>
label {
    @extend .form-label !optional;
}

// todo replace '.input-group-addon' with '.input-group-text'
.input-group-addon {
    @extend .input-group-text !optional;
}

// scss-docs-start table-variant
// provide bootstrap v3 fallback for <tr class="{themeColor}"> markup
// bootstrap v5 uses new class syntax -> .table-{themeColor}
@mixin table-variant($state, $background) {
    .#{$state} {
        /* stylelint-disable custom-property-empty-line-before */
        // todo: check why 'grunt formatsass' task is adding new empty lines
        $color: color-contrast(opaque($body-bg, $background));

        $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));

        $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));

        $active-bg: mix($color, $background, percentage($table-active-bg-factor));

        --bs-table-bg: #{$background};

        --bs-table-striped-bg: #{$striped-bg};

        --bs-table-striped-color: #{color-contrast($striped-bg)};

        --bs-table-active-bg: #{$active-bg};

        --bs-table-active-color: #{color-contrast($active-bg)};

        --bs-table-hover-bg: #{$hover-bg};

        --bs-table-hover-color: #{color-contrast($hover-bg)};

        color: $color;
        border-color: mix($color, $background, percentage($table-border-factor));
        /* stylelint-enable custom-property-empty-line-before */
    }
}

@each $color, $value in $table-variants {
    @include table-variant($color, $value);
}
// scss-docs-end table-variant

// badge fallback
// todo use ".badge .rounded-pill .bg-{themeColor}" instead of only .badge
// todo only used in debug console?
[class="badge"] {
    background-color: $gray-600;
    border-radius: $rounded-pill;
}

// nav fallback
// todo add ".nav-item" and ".nav-link" classes to markup
.nav.nav-tabs {
    > li:not(.nav-item) {
        @extend .nav-item !optional;

        > a:not(.nav-link) {
            @extend .nav-link !optional;
        }
    }
}

// panel fallback
// see bootstrap v4 migration https://getbootstrap.com/docs/4.5/migration/#panels
// todo replace ".panel" classes with ".card"
.panel {
    @extend .card !optional;

    &-group {
        // .card-group is not a replacement for panel-group, therefore we build our own
        display: flex;
        flex-flow: column;
    }

    &-heading {
        color: $gray-700;
        padding: 0.625rem 1rem;
    }

    &-title {
        @extend .card-title !optional;

        margin-top: 0;
        margin-bottom: 0;
    }

    &-body {
        @extend .card-body !optional;
    }

    &-footer {
        @extend .card-footer !optional;
    }
}

// .label (badges) fallback
// todo replace ".label" classes with ".badge"
.label {
    @extend .badge !optional;

    &-success {
        background-color: $success;
    }
}

.page-header {
    padding: 0.625rem 1rem;
    margin: 2rem 0 1rem;
    border-bottom: 1px solid $gray-700;
}

code {
    margin: 0.25rem 0.5rem;
}

.help-block {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: $gray-700;
}

.btn-toolbar {
    > .btn,
    > .btn-group,
    > .input-group {
        margin-left: 0.4rem;
        float: left;
    }
}

.btn-toolbar {
    > .btn:first-child,
    > .btn-group:first-child,
    > .input-group:first-child {
        margin-left: 0;
    }
}

.input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
}

.form-inline .form-group {
    display: inline-block;
}

.form-irre-object.panel {
    flex: 1 0 100%;
    width: 100%;
}