@import "../include/vars";

:root {
    --border-radius: 6px;
}

.no-border {border: 0 !important;}
.no-border-left {border-left: none !important;}
.no-border-right {border-right: none !important;}
.no-border-top {border-top: none !important;}
.no-border-bottom {border-bottom: none !important;}
.no-border-visible {border-color: transparent !important;}

.border-none {border: 0 !important;}
.border-left-none {border-left: none !important;}
.border-right-none {border-right: none !important;}
.border-top-none {border-top: none !important;}
.border-bottom-none {border-bottom: none !important;}
.border-visible-none {border-color: transparent !important;}

.border {border: 1px solid transparent;}
.border-left {border-left: 1px solid transparent;}
.border-right {border-right: 1px solid transparent;}
.border-top {border-top: 1px solid transparent;}
.border-bottom {border-bottom: 1px solid transparent;}

.border-radius, .rounded {border-radius: var(--border-radius);}
.border-radius-half, .to-cycle {border-radius: 50%;}

each(range(1, 20), .(@i) {
    .border-size-@{i} {border-width: unit(@i, px)!important;}
    .border-radius-@{i} {border-radius: unit(@i, px)!important;}
});

each(@media-rules, {
    @container (min-width: @value) {
        .border-none-@{key} {border: none!important;}
        .border-top-none-@{key} {border-top: none!important;}
        .border-right-none-@{key} {border-right: none!important;}
        .border-bottom-none-@{key} {border-bottom: none!important;}
        .border-left-none-@{key} {border-left: none!important;}
    }
})

.border-solid {border-style: solid!important;}
.border-dashed {border-style: dashed!important;}
.border-dotted {border-style: dotted!important;}
.border-double {border-style: double!important;}
.border-groove {border-style: groove!important;}
.border-inset {border-style: inset!important;}
.border-outset {border-style: outset!important;}
.border-ridge {border-style: ridge!important;}