.border {
    border: 1px solid var(--border-color) !important;
}

.border-start {
    border-inline-start: 1px solid var(--border-color) !important;
}

.border-end {
    border-inline-end: 1px solid var(--border-color) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--border-color) !important;
}

@each $property, $value in $border-light-colors {
    .border-#{$property} {
        border-color: var(--#{$property}) !important;
    }
}


.br-success {
    border-color: var(--success-border) !important;
}

.br-white {
    border-color: var(--base) !important;
}

.border-light-white {
    border-color: rgba(255, 255, 255, 0.38) !important;
}

.input-form-light {
    border-color: var(--input-form-light) !important;
}

.input-form-dark {
    border-color: var(--input-form-dark) !important;
}

// border hover
.br-hover-primary {
    @include transition(all 0.3s);

    &:hover {
        border-color: var(--primary-600) !important;
    }
}

.br-hover-success {
    @include transition(all 0.3s);

    &:hover {
        border-color: var(--success-main) !important;
    }
}

.br-hover-info {
    @include transition(all 0.3s);

    &:hover {
        border-color: var(--info-main) !important;
    }
}

.br-hover-warning {
    @include transition(all 0.3s);

    &:hover {
        border-color: var(--warning-main) !important;
    }
}

.br-hover-danger {
    @include transition(all 0.3s);

    &:hover {
        border-color: var(--danger-main) !important;
    }
}


@each $color, $shades in $colors {
    @each $shade, $value in $shades {
        .border-#{$color}-#{$shade} {
            border-color: var(--#{$color}-#{$shade}) !important;
        }
    }
}

@each $color, $shades in $semantic-colors {
    @each $shade, $value in $shades {
        .border-#{$color}-#{$shade} {
            border-color: var(--#{$color}-#{$shade}) !important;
        }
    }
}


@each $property, $value in $extra-colors {
    .border-#{$property} {
        border-color: var(--#{$property}) !important;
    }
}

.border-width {
    &-2-px {
        border-width: 2px !important;
    }

    &-3-px {
        border-width: 3px !important;
    }

    &-4-px {
        border-width: 4px !important;
    }

    &-5-px {
        border-width: 5px !important;
    }
}

.border-start-width {
    &-2-px {
        border-inline-start-width: 2px !important;
    }

    &-3-px {
        border-inline-start-width: 3px !important;
    }

    &-4-px {
        border-inline-start-width: 4px !important;
    }

    &-5-px {
        border-inline-start-width: 5px !important;
    }
}

.border-end-width {
    &-2-px {
        border-inline-end-width: 2px !important;
    }

    &-3-px {
        border-inline-end-width: 3px !important;
    }

    &-4-px {
        border-inline-end-width: 4px !important;
    }

    &-5-px {
        border-inline-end-width: 5px !important;
    }

    &-6-px {
        border-inline-end-width: 6px !important;
    }
}

.border-top-0 {
    border-top: 0 !important;
}

.border-end-0 {
    border-right: 0 !important;
}

.border-start-0 {
    border-left: 0 !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}


.border-dashed {
    border-style: dashed !important;
}

.center-border {
    position: relative;

    &::before {
        position: absolute;
        content: "";
        width: 1px;
        height: calc(100% - 9px);
        background-color: var(--neutral-300);
        left: 50%;
        transform: translateX(-50%);
    }
}