// font-color
$colors: (
    text: $light,
    text-s: $text,
    primary: $primary,
    primary-off: $primary-off,
    alter: $alter,
    secondary: $secondary,
    terciary: $terciary,
    quaternary: $quaternary,
    success: $success,
    error: $error,
    warning: $warning,
    border: $border
);

// font-color
@each $name, $text-color in $colors {
    .color-#{$name} {
        color: $text-color;
    }
}

// background-color
@each $name, $bg-color in $colors {
    .bg-#{$name} {
        background-color: $bg-color;
    }
}

.fs-7 {
    font-size: 0.8rem;
}

.fs-8 {
    font-size: 0.6rem;
}

// borders
@for $i from 1 to 5 {
    .border-c-#{$i} {
        border: $i * 1px #{solid};
    }
}

@for $i from 1 to 5 {
    .border-#{$i} {
        border: $i * 1px #{solid};
    }
}

@for $i from 1 to 5 {
    .border-b-#{$i} {
        border-bottom: $i * 1px #{solid};
        border-top: 0;
        border-right: 0;
        border-left: 0;
    }
}

@for $i from 1 to 5 {
    .border-t-#{$i} {
        border-top: $i * 1px #{solid};
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
    }
}

@for $i from 1 to 5 {
    .border-l-#{$i} {
        border-left: $i * 1px #{solid};
        border-bottom: 0;
        border-right: 0;
        border-top: 0;
    }
}

@for $i from 1 to 5 {
    .border-r-#{$i} {
        border-right: $i * 1px #{solid};
        border-bottom: 0;
        border-top: 0;
        border-left: 0;
    }
}

@each $name, $border-color in $colors {
    .border-c-#{$name} {
        border-color: $border-color;
    }
}

// opacity-values

@for $i from 0 to 10 {
    .opacity-#{$i} {
        opacity: $i * 0.1;
    }
}

@for $i from 1 to 10 {
    .top-#{$i} {
        top: $i * 0.5rem;
    }
}

@for $i from 1 to 10 {
    .right-#{$i} {
        right: $i * 0.5rem;
    }
}

@for $i from 1 to 10 {
    .left-#{$i} {
        left: $i * 0.5rem;
    }
}

@for $i from 1 to 10 {
    .bottom-#{$i} {
        bottom: $i * 0.5rem;
    }
}

//section-spacing