@use "sass:color";
@use "sass:map";
@use 'variables';

$colors: variables.$colors;

// Generate color variants 100, 200, 300, 400, 500, 600, 700, 800, 900
// for 100 lightness should be 80% and for 900 lightness should be 40%
@each $color, $value in $colors {
    @for $i from 1 through 9 {
        $new-color: color.adjust($value, $lightness: ($i - 6) * -1 * 10%);
        $colors: map.set($colors, #{$color}-#{$i}00, $new-color);
    }
}

// Mixins
@mixin bg-color($color) {
    background-color: map.get($colors, $color);
    border-color: map.get($colors, $color);
    color: #fff;
}

@mixin color($color) {
    color: map.get($colors, $color);
}

@mixin border-color($color) {
    border-color: map.get($colors, $color);
}

.border {
    border-width: 1px;
    border-style: solid;
}

.border-2 {
    border-width: 2px;
    border-style: solid;
}

.border-4 {
    border-width: 4px;
    border-style: solid;
}

.border-x-0 {
    border-left-width: 0;
    border-right-width: 0;
    border-left-style: solid;
    border-right-style: solid;
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px;
    border-left-style: solid;
    border-right-style: solid;
}

.border-x-2 {
    border-left-width: 2px;
    border-right-width: 2px;
    border-left-style: solid;
    border-right-style: solid;
}

.border-y-0 {
    border-top-width: 0;
    border-bottom-width: 0;
    border-top-style: solid;
    border-bottom-style: solid;
}

.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
}

.border-y-2 {
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-top-style: solid;
    border-bottom-style: solid;
}

.border-t-0 {
    border-top-width: 0;
    border-top-style: solid;
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-t-2 {
    border-top-width: 2px;
    border-top-style: solid;
}

.border-r-0 {
    border-right-width: 0;
    border-right-style: solid;
}

.border-r {
    border-right-width: 1px;
    border-right-style: solid;
}

.border-r-2 {
    border-right-width: 2px;
    border-right-style: solid;
}

.border-b-0 {
    border-bottom-width: 0;
    border-bottom-style: solid;
}

.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-b-2 {
    border-bottom-width: 2px;
    border-bottom-style: solid;
}

.border-l-0 {
    border-left-width: 0;
    border-left-style: solid;
}

.border-l {
    border-left-width: 1px;
    border-left-style: solid;
}

.border-l-2 {
    border-left-width: 2px;
    border-left-style: solid;
}

@each $color, $value in $colors {
    .bg-#{$color} {
        @include bg-color($color);
    }

    @each $breakpoint, $value in variables.$breakpoints {
        @media (max-width: $value) {
            .#{$breakpoint}\:bg-#{$color} {
                @include bg-color($color);
            }
        }
    }
}

@each $color, $value in $colors {
    .text-#{$color} {
        @include color($color);
    }

    @each $breakpoint, $value in variables.$breakpoints {
        @media (max-width: $value) {
            .#{$breakpoint}\:text-#{$color} {
                @include color($color);
            }
        }
    }
}

@each $color, $value in $colors {
    .border-#{$color} {
        @include border-color($color);
    }

    @each $breakpoint, $value in variables.$breakpoints {
        @media (max-width: $value) {
            .#{$breakpoint}\:border-#{$color} {
                @include border-color($color);
            }
        }
    }
}

// Hover
@mixin hover-bg-color($color) {
    &:hover {
        background-color: map.get($colors, $color);
    }
}

@mixin hover-color($color) {
    &:hover {
        color: map.get($colors, $color);
    }
}

@mixin hover-border-color($color) {
    &:hover {
        border-color: map.get($colors, $color);
    }
}

@each $color, $value in $colors {
    .hover\:bg-#{$color} {
        @include hover-bg-color($color);
    }
}

@each $color, $value in $colors {
    .hover\:text-#{$color} {
        @include hover-color($color);
    }
}

@each $color, $value in $colors {
    .hover\:border-#{$color} {
        @include hover-border-color($color);
    }
}