Asymmetrik/ngx-starter

@use 'sass:math';
@import 'shared';

$form-inline-edit-btns-bottom: -2rem !default;
$form-inline-edit-label-col-width: 30% !default;

.card-body.editing {
    padding-bottom: 0;
}

.inline-edit-header-btns {
    display: inline-block;
}

@supports (position: sticky) {
    .inline-edit-header-btns {
        display: none;
    }
}

.inline-edit-btns {
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    border-radius: 0 0 $border-radius $border-radius;
    bottom: $form-inline-edit-btns-bottom;
    margin-left: -1 * $card-spacer-x;
    padding: $card-spacer-y $card-spacer-x;
    position: sticky;
    width: calc(100% + #{$card-spacer-x} * 2);
    z-index: $zindex-sticky;
}


.form-inline-edit {
    border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);

    textarea.form-control {
        padding-top: calc(#{$input-padding-y} + 1px);
    }

    .form-inline-edit-item {
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
        padding: $spacer * 0.75;

        &:nth-of-type(odd) {
            background-color: $table-striped-bg;
        }

        .col:first-child {
            -webkit-box-flex: 0;
            flex: 0 0 $form-inline-edit-label-col-width;
            max-width: $form-inline-edit-label-col-width;
        }

        .col:last-child {
            padding-right: 0;
        }

        .col-form-readonly-value {
            -webkit-box-flex: 0;
            flex: 0 0 100% - $form-inline-edit-label-col-width;
            max-width: 100% - $form-inline-edit-label-col-width;

            & > div {
                padding: calc(#{$input-padding-y} + #{$input-border-width} * 2)
                    calc(#{$input-padding-x} + #{$input-border-width}) calc(#{$input-padding-y});
            }
        }

        .col-form-label {
            padding: calc(#{$input-padding-y} + #{$input-border-width} * 2)
                calc(#{math.div($grid-gutter-width, 2)} + #{$input-border-width})
                calc(#{$input-padding-y});
        }
    }
}

@mixin form-validation-state-selector($state) {
    @if ($state == "valid" or $state == "invalid") {
        .was-validated #{if(&, "&", "")}:#{$state},
        #{if(&, "&", "")}.is-#{$state} {
            @content;
        }
    } @else {
        #{if(&, "&", "")}.is-#{$state} {
            @content;
        }
    }
}