// Borders
//

$border-style: solid !default;

$border-top-width: 1px !default;
$border-right-width: 1px !default;
$border-bottom-width: 1px !default;
$border-left-width: 1px !default;
$border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width) !default;

$border-color--light: color('gray-30') !default;
$border-color--dark: color('gray-70') !default;
$border-color: var(--border-color--light) !default;

$border-top-left-radius: 0.25rem !default;
$border-top-right-radius: 0.25rem !default;
$border-bottom-right-radius: 0.25rem !default;
$border-bottom-left-radius: 0.25rem !default;
$border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius) !default;

$border-top-left-radius-xs: calc(var(--border-top-left-radius) * #{size-multiplier('xs')}) !default;
$border-top-left-radius-sm: calc(var(--border-top-left-radius) * #{size-multiplier('sm')}) !default;
$border-top-left-radius-md: calc(var(--border-top-left-radius) * #{size-multiplier('md')}) !default;
$border-top-left-radius-lg: calc(var(--border-top-left-radius) * #{size-multiplier('lg')}) !default;
$border-top-left-radius-xl: calc(var(--border-top-left-radius) * #{size-multiplier('xl')}) !default;

$border-top-right-radius-xs: calc(var(--border-top-right-radius) * #{size-multiplier('xs')}) !default;
$border-top-right-radius-sm: calc(var(--border-top-right-radius) * #{size-multiplier('sm')}) !default;
$border-top-right-radius-md: calc(var(--border-top-right-radius) * #{size-multiplier('md')}) !default;
$border-top-right-radius-lg: calc(var(--border-top-right-radius) * #{size-multiplier('lg')}) !default;
$border-top-right-radius-xl: calc(var(--border-top-right-radius) * #{size-multiplier('xl')}) !default;

$border-bottom-right-radius-xs: calc(var(--border-bottom-right-radius) * #{size-multiplier('xs')}) !default;
$border-bottom-right-radius-sm: calc(var(--border-bottom-right-radius) * #{size-multiplier('sm')}) !default;
$border-bottom-right-radius-md: calc(var(--border-bottom-right-radius) * #{size-multiplier('md')}) !default;
$border-bottom-right-radius-lg: calc(var(--border-bottom-right-radius) * #{size-multiplier('lg')}) !default;
$border-bottom-right-radius-xl: calc(var(--border-bottom-right-radius) * #{size-multiplier('xl')}) !default;

$border-bottom-left-radius-xs: calc(var(--border-bottom-left-radius) * #{size-multiplier('xs')}) !default;
$border-bottom-left-radius-sm: calc(var(--border-bottom-left-radius) * #{size-multiplier('sm')}) !default;
$border-bottom-left-radius-md: calc(var(--border-bottom-left-radius) * #{size-multiplier('md')}) !default;
$border-bottom-left-radius-lg: calc(var(--border-bottom-left-radius) * #{size-multiplier('lg')}) !default;
$border-bottom-left-radius-xl: calc(var(--border-bottom-left-radius) * #{size-multiplier('xl')}) !default;

$border-radius-xs: #{$border-top-left-radius-xs} #{$border-top-right-radius-xs} #{$border-bottom-right-radius-xs} #{$border-bottom-left-radius-xs} !default;
$border-radius-sm: #{$border-top-left-radius-sm} #{$border-top-right-radius-sm} #{$border-bottom-right-radius-sm} #{$border-bottom-left-radius-sm} !default;
$border-radius-md: #{$border-top-left-radius-md} #{$border-top-right-radius-md} #{$border-bottom-right-radius-md} #{$border-bottom-left-radius-md} !default;
$border-radius-lg: #{$border-top-left-radius-lg} #{$border-top-right-radius-lg} #{$border-bottom-right-radius-lg} #{$border-bottom-left-radius-lg} !default;
$border-radius-xl: #{$border-top-left-radius-xl} #{$border-top-right-radius-xl} #{$border-bottom-right-radius-xl} #{$border-bottom-left-radius-xl} !default;

$border-top-left-radiuses: (
    'xs': $border-top-left-radius-xs,
    'sm': $border-top-left-radius-sm,
    'md': $border-top-left-radius-md,
    'lg': $border-top-left-radius-lg,
    'xl': $border-top-left-radius-xl,
) !default;

$border-top-right-radiuses: (
    'xs': $border-top-right-radius-xs,
    'sm': $border-top-right-radius-sm,
    'md': $border-top-right-radius-md,
    'lg': $border-top-right-radius-lg,
    'xl': $border-top-right-radius-xl,
) !default;

$border-bottom-right-radiuses: (
    'xs': $border-bottom-right-radius-xs,
    'sm': $border-bottom-right-radius-sm,
    'md': $border-bottom-right-radius-md,
    'lg': $border-bottom-right-radius-lg,
    'xl': $border-bottom-right-radius-xl,
) !default;

$border-bottom-left-radiuses: (
    'xs': $border-bottom-left-radius-xs,
    'sm': $border-bottom-left-radius-sm,
    'md': $border-bottom-left-radius-md,
    'lg': $border-bottom-left-radius-lg,
    'xl': $border-bottom-left-radius-xl,
) !default;

$border-radiuses: (
    'xs': $border-radius-xs,
    'sm': $border-radius-sm,
    'md': $border-radius-md,
    'lg': $border-radius-lg,
    'xl': $border-radius-xl,
) !default;

@function border-top-left-radius($border-top-left-radius-key: null) {
    @if not ($border-top-left-radius-key) {
        @return var(--border-top-left-radius);
    }

    @return var(--border-top-left-radius-#{$border-top-left-radius-key});
}

@function border-top-right-radius($border-top-right-radius-key: null) {
    @if not ($border-top-right-radius-key) {
        @return var(--border-top-right-radius);
    }

    @return var(--border-top-right-radius-#{$border-top-right-radius-key});
}

@function border-bottom-left-radius($border-bottom-left-radius-key: null) {
    @if not ($border-bottom-left-radius-key) {
        @return var(--border-bottom-left-radius);
    }

    @return var(--border-bottom-left-radius-#{$border-bottom-left-radius-key});
}

@function border-bottom-right-radius($border-bottom-right-radius-key: null) {
    @if not ($border-bottom-right-radius-key) {
        @return var(--border-bottom-right-radius);
    }

    @return var(--border-bottom-right-radius-#{$border-bottom-right-radius-key});
}

@function border-radius($border-radius-key: null) {
    @if not ($border-radius-key) {
        @return var(--border-radius);
    }

    @return var(--border-radius-#{$border-radius-key});
}

$border-variants: (
    'primary',
    'secondary',
    'light',
    'dark',
    'white',
    'gray-10',
    'gray-20',
    'gray-30',
    'gray-40',
    'gray-50',
    'gray-60',
    'gray-70',
    'gray-80',
    'gray-90',
    'black',
    'info',
    'success',
    'warning',
    'danger',
) !default;

$border-positions: ('top', 'right', 'bottom', 'left') !default;