// Layout utility classes
// Source: https://github.com/basscss/utility-layout

.inline {
    display: inline;
}

.block {
    display: block;
}

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

.table {
    display: table;
}

.table-cell {
    display: table-cell;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-auto {
    overflow: auto;
}

.clearfix::before,
.clearfix::after {
    display: table;
    content: ' ';
}

.clearfix::after {
    clear: both;
}

.left {
    float: left;
}

.right {
    float: right;
}

.fullscreen {
    min-width: 100vw;
    height: 100px; // IE fix.
    min-height: 100vh;
}

.full-content-x {
    width: 100%;
    min-width: 100%;
}

.full-content-y {
    height: 100%;
    min-height: 100%;
}

.full-content {
    @extend .full-content-x;
    @extend .full-content-y;
}

@for $i from 1 through 10 {
    $size: $i * 10;
    .mod-width-#{$size} {
        width: $size * 1%;
    }
}

@for $i from 1 through 10 {
    $size: $i * 10;
    .mod-height-#{$size} {
        height: $size * 1em;
    }
}

.hidden {
    display: none;
    visibility: hidden;
}

// Different from .hidden and used to initialy hide an element that will later be shown dynamically
// The visibility property makes it more complicated to show the element with a simple slideToggle
.hide {
    display: none;
}

.split-layout {
    height: 100%;
    min-height: min-content;

    @extend .flex;
    @extend .flex-auto;
    @extend .flex-wrap;

    .column {
        max-width: 50%;
        overflow-y: auto;

        @extend .flex-auto;

        &.mod-small-content {
            height: auto;
        }
    }

    .column + .column {
        border-left: $default-border;
    }

    &.no-border {
        .column + .column {
            border-left: none;
        }
    }

    @media (max-width: $breakpoint-desktop-small) {
        .column {
            min-width: 100%;
            overflow: initial;
        }

        .column + .column {
            border-top: $default-border;
            border-left: none;
        }
    }
}

.splitted-layout {
    // Deprecated use .split-layout instead
    @extend .split-layout;
}

.normal-height {
    max-height: none;
}

.auto-height {
    height: auto;
}

.full-height {
    min-height: min-content;
}

.full-width-min {
    min-width: min-content;
}

.full-width-max {
    min-width: max-content;
}

.small-desktop-breakpoint-responsive-UI {
    min-width: $breakpoint-desktop-small;
}

@for $i from 0 through 10 {
    .z-index-#{$i} {
        z-index: $i;
    }
}

.background {
    --background-color: var(--white);

    background-color: var(--background-color);

    &.mod-light {
        --background-color: var(--grey-20);
    }

    &.mod-medium {
        --background-color: var(--grey-40);
    }

    // TODO: add mod-error, mod-dark etc.
}