body {
    @apply text-base text-tx-primary overflow-hidden min-w-[375px];
}
.form-tips {
    @apply text-tx-secondary text-xs leading-6 mt-1;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
}

/* NProgress */
#nprogress .bar {
    @apply bg-primary #{!important};
}
$directions: (
    't': 'top',
    'r': 'right',
    'b': 'bottom',
    'l': 'left'
);
$colors: (
    'light2': var(--el-border-color-light2)
);
$borderStyle: (
    'dotted': dotted,
    'dashed': dashed,
    'solid': solid
);
@each $name, $direction in $directions {
    @each $color-name, $color-value in $colors {
        @each $border-style-name, $border-style-value in $borderStyle {
            .border-#{$name}-#{$border-style-name}-#{$color-name} {
                border-#{$direction}: 1px $border-style-value $color-value;
            }
        }
    }
}
$flexDirection: (
    'row': row,
    'row-reverse': row-reverse,
    'column': column,
    'column-reverse': column-reverse
);

$justifyContent: (
    'start': flex-start,
    'end': flex-end,
    'center': center,
    'between': space-between,
    'around': space-around,
    'evenly': space-evenly
);
$alignItems: (
    'start': flex-start,
    'end': flex-end,
    'center': center,
    'baseline': baseline,
    'stretch': stretch
);

@each $flex-direction-name, $flex-direction-value in $flexDirection {
    @each $justify-content-name, $justify-content-value in $justifyContent {
        @each $align-items-name, $align-items-value in $alignItems {
            .flex-#{$flex-direction-name}-#{$justify-content-name}-#{$align-items-name} {
                display: flex;
                flex-direction: $flex-direction-value;
                justify-content: $justify-content-value;
                align-items: $align-items-value;
            }
        }
    }
}
