.border{
    border: var(--border-thickness) var(--border-color) var(--border-style);
    border-radius: var(--border-radius);
}

$positions: top, bottom, left, right;

@each $position in $positions {
    .border-#{$position}{
        border-#{$position}: var(--border-thickness) var(--border-color) var(--border-style);
    }
}


// Positioning of the elements
.fixed{
    position: fixed;
    z-index: 1001;
}

// Block Display

.block{
    display: block;
    width: 100%;
}


// Scrollbar on chromium
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: var(--off-background); /* or add it to the track */
  }
  
  /* Add a thumb */
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
}

// No Transition
.no-transition{
    transition-duration: 0s !important;

    &:hover, &:focus, &:active{
        transition-duration: 0s !important;
    }
}

.no-animation{
    animation-iteration-count: 0 !important;
    animation-duration: 0s !important;

    &:hover, &:focus, &:active{
        animation-iteration-count: 0 !important;
        animation-duration: 0s !important;
    }
}

// Alignment

.align-horizontal{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.align-vertical{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.align-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}