$sizes: (
    "auto": auto,
    "0": 0px,
    "1": 2px,
    "2": 5px,
    "3": 8px,
    "4": 10px,
    "5": 15px
);
$directions: (
    "s": "left",
    "e": "right",
    "t": "top",
    "b": "bottom"
);



@each $size, $val in $sizes {
    .m-#{$size} {
        margin: $val;
    }
    .p-#{$size} {
        padding: $val;
    }
    @each $dir, $dir-val in $directions {
        .m#{$dir}-#{$size} {
            margin-#{$dir-val}: $val;
        }
        .p#{$dir}-#{$size} {
            padding-#{$dir-val}: $val;
        }

    }
    .mx-#{$size} {
        margin-left: $val;
        margin-right: $val;
    }
    .my-#{$size} {
        margin-top: $val;
        margin-bottom: $val;
    }
    .px-#{$size} {
        padding-left: $val;
        padding-right: $val;
    }
    .py-#{$size} {
        padding-top: $val;
        padding-bottom: $val;
    }
}
.m-auto {
    margin: auto;
}
.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

$w_h_sizes: (
  '25': 25%,
  '50': 50%,
  '75': 75%,
  '80': 80%,
  '100': 100%,
  'auto': auto,
);

// Loop through the sizes and generate classes
@each $name, $value in $w_h_sizes {
  .h-#{$name} {
    height: $value;
  }

  .w-#{$name} {
    width: $value;
  }
}

.d-flex {
    display: flex;
}
.d-flex-col {
    display: flex;
    flex-direction: column;
}
.d-block {
    display: block;
}
.cr-all {
    border-radius: $border-radius;
}
.cr-top {
    border-radius: $border-radius $border-radius 0px 0px;
}
.cr-right {
    border-radius: 0px $border-radius $border-radius 0px;
}
.cr-left {
    border-radius: $border-radius 0px 0px $border-radius;
}
.cr-bottom {
    border-radius: 0px 0px $border-radius $border-radius;
}

.t-s {
    text-align: start;  
}
.t-e {
    text-align: end;
}
.t-m {
    text-align: center;
}

.borderless-btn {
    display: flex;
    color: var(--#{$prefix}-text);
    font-size: 1em;
    border: none;
    padding: 10px 15px 10px 15px;
    border-radius: 20px;
    background-color: var(--#{$prefix}-surface2);
    transition: all 0.1s linear;
}
.borderless-btn:hover {
    background-color: var(--#{$prefix}-overlay1);
    color: var(--#{$prefix}-nav-active-color);
}

table.table {
    color: var(--#{$prefix}-text);
    td {
        padding-right: 10px;
    }
}

table.table-striped {
    border-collapse: collapse;
    overflow: hidden;
    thead {
        background-color: var(--#{$prefix}-surface0);
    }
    tbody {
        tr {
            &.row_awaiting_processing {
                background-color: var(--#{$prefix}-bg) !important;
                max-width: 0px;
                div {
                    opacity: 0;
                    max-height: 0px;
                }
            }
            div {
                display: block;
                overflow: hidden;
                max-height: 50px;
                transition: max-height 0.6s cubic-bezier(0.02, 0.15, 0.84, 0.98),
                    opacity 0.5s ease-in;
            }
            max-width: 100%;
            transition: all 0.5s ease-in;
            &:nth-child(odd) {
                background-color: var(--#{$prefix}-crust);
            }
            &:nth-child(even) {
                background-color: var(--#{$prefix}-mantle);
            }
        }
    }
    .positive {
        color: var(--#{$prefix}-green);
    }
    .negative {
        color: var(--#{$prefix}-red);
    }
}

.popup-menu {
    width: max-content;
    height: max-content;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1em;
    background-color: var(--#{$prefix}-overlay2);
    color: var(--#{$prefix}-bg);
    border-radius: 0px 0px $border-radius $border-radius;
    border-style: solid;
    border-color: var(--#{$prefix}-overlay2);
    border-width: thin;
    transition: max-height 0.2s linear;
}

.popup-menu select {
    font-size: 1em;
    border: none;
    border-radius: $border-radius;
}
.popup-menu input {
    width: 5em;
    font-size: 1em;
    margin-left: 10px;
    margin-right: 10px;
}