@import 'uniform/mixins';

//----------------------------------------------------------------
//             Border
//----------------------------------------------------------------
@include size-rule('.border') using ($size) {
    border-width: $size;
}

@include color-rule('.border') using ($color) {
    --border-color: #{red($color)}, #{green($color)}, #{blue($color)};
}

@include responsive-rule('.border-dashed') {
    border-style: dashed;
}

@each $direction in 'top' 'right' 'bottom' 'left' {
    @include responsive-rule('.border-#{$direction}'){
        border-#{$direction}-width: 1px;
    }
    @include size-rule('.border-#{$direction}') using ($size){
        border-#{$direction}-width: $size;
    }
    @include color-rule('.border-#{$direction}') using ($color) {
        border-#{$direction}-color: rgba(#{red($color)}, #{green($color)}, #{blue($color)}, var(--border-opacity));
    }
}

//----------------------------------------------------------------
//             Border Radius
//----------------------------------------------------------------
@include size-rule('.rounded') using ($size){ border-radius: $size;}
@include size-rule('.rounded-top') using ($size){
    border-top-right-radius: $size;
    border-top-left-radius: $size;
}
@include size-rule('.rounded-bottom') using ($size){
    border-bottom-right-radius: $size;
    border-bottom-left-radius: $size;
}
@include size-rule('.rounded-left') using ($size){
    border-top-left-radius: $size;
    border-bottom-left-radius: $size;
}
@include size-rule('.rounded-right') using ($size){
    border-top-right-radius: $size;
    border-bottom-right-radius: $size;
}

@include responsive-rule('.square') { border-radius: 0;}
@include responsive-rule('.square-top') {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
@include responsive-rule('.square-bottom') {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
@include responsive-rule('.square-left') {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
@include responsive-rule('.square-right') {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

@include responsive-rule('.round') { border-radius: 50%;}


//----------------------------------------------------------------
//             Divide
//----------------------------------------------------------------
@include size-rule('.divide-h') using ($size) {
    & > * + * {
        border-left-width: $size;
    }
}
@include size-rule('.divide-v') using ($size) {
    & > * + * {
        border-top-width: $size;
    }
}