@import "utilities/border";
@import "utilities/functions";

.box {
    padding: var(--sh-box-padding);
    .border-radius(var(--sh-radius));
    position: relative;
}
ul.boxed > li {
    .box();
}

// theme this if possible
each(@colors, {
    .box-@{key} {
        .colorbox(@value);
    }
    
});

// VER_NEXT: added just one bordered without background
.box-border {
    border: var(--sh-box-border) solid var(--sh-grey-dark);

}


.box-white-dark {
    border: var(--sh-box-border) solid var(--sh-grey-dark);
    background-color: var(--sh-white);
}


.box-white-normal {
    border: var(--sh-box-border) solid var(--sh-grey);
    background-color: var(--sh-white);
}
.box-white {
    border: var(--sh-box-border) solid var(--sh-grey-light);
    
}

each(@shadows, {
    .box-shadow-@{key} {
        box-shadow: @value;
    }
});