$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;
    }
}

$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;
}

.positive {
    color: var(--#{$prefix}-green);
}
.negative {
    color: var(--#{$prefix}-red);
}

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}-base) !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);
            }
        }
    }
}

.popup-menu {
    width: max-content;
    height: max-content;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1em;
    background-color: var(--#{$prefix}-overlay0);
    color: var(--#{$prefix}-base);
    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;

}

.input {
    width: 10em;
    font-size: 1em;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: $border-radius;
    border-style: solid;
    border-color: var(--#{$prefix}-text);
    padding-top: 2px;
    padding-bottom: 3px;
}

.select {
    border: none;
    font-size: 1em;
    border-radius: $border-radius;
    background-color: var(--#{$prefix}-base);
    color: var(--#{$prefix}-text);
}

.select.border {
    border: 2pt solid var(--#{$prefix}-text);
}

.input-sizer {
  display: inline-grid;
  vertical-align: top;
  align-items: center;
  position: relative;
  border: solid 1px;
  padding: .25em .5em;
  margin: 5px;
  
  &.stacked {
    padding: .5em;
    align-items: stretch;
    
    &::after,
    input,
    textarea {
      grid-area: 2 / 1;
    }
  }
  
  &::after,
  input,
  textarea {
    width: auto;
    min-width: 1em;
    grid-area: 1 / 2;
    font: inherit;
    padding: 0.25em;
    margin: 0;
    resize: none;
    background: none;
    appearance: none;
    border: none;
  }
  
  span {
    padding: 0.25em;
  }
  
  &::after {
    content: attr(data-value) ' ';
    visibility: hidden;
    white-space: pre-wrap;
  }
  
  &:focus-within {
    outline: solid 1px blue;
    box-shadow: 4px 4px 0px blue;
    
    > span { color: blue; }
    
    textarea:focus,
    input:focus {
      outline: none;
    }
  }
}