/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/

@use "sass:map";
@use "sass:list";
@use "@/styles/desktop/configured-variables/template" as variables;

// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
@function map-deep-get($map, $keys...) {
    @each $key in $keys {
        $map: map.get($map, $key);
    }

    @return $map;
}

@function map-deep-set($map, $keys, $value) {
    $maps: ($map,);
    $result: null;

    // If the last key is a map already
    // Warn the user we will be overriding it with $value
    @if type-of(nth($keys, -1)) == "map" {
        @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
    }

    // If $keys is a single key
    // Just merge and return
    @if length($keys) == 1 {
        @return map-merge($map, ($keys: $value));
    }

    // Loop from the first to the second to last key from $keys
    // Store the associated map to this key in the $maps list
    // If the key doesn't exist, throw an error
    @for $i from 1 through length($keys) - 1 {
        $current-key: list.nth($keys, $i);
        $current-map: list.nth($maps, -1);
        $current-get: map.get($current-map, $current-key);

        @if not $current-get {
            @error "Key `#{$key}` doesn't exist at current level in map.";
        }

        $maps: list.append($maps, $current-get);
    }

    // Loop from the last map to the first one
    // Merge it with the previous one
    @for $i from length($maps) through 1 {
        $current-map: list.nth($maps, $i);
        $current-key: list.nth($keys, $i);
        $current-val: if($i == list.length($maps), $value, $result);
        $result: map.map-merge($current-map, ($current-key: $current-val));
    }

    // Return result
    @return $result;
}

// font size utility classes
@each $name, $size in variables.$font-sizes {
    .text-#{$name} {
        font-size: $size;
        line-height: map.get(variables.$font-line-height, $name);
    }
}

// truncate utility class
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// gap utility class
@each $name, $size in variables.$gap {
    .gap-#{$name} {
        gap: $size;
    }

    .gap-x-#{$name} {
        column-gap: $size;
    }

    .gap-y-#{$name} {
        row-gap: $size;
    }
}

.list-none {
    list-style-type: none;
}
