// Conpage color pallet
// instruction https://www.notion.so/conpage/Colors-7c8349a05aa64110b589c26b2684e1e1

@function color($key,$tone:1,$opacity:1) {
    @if $key == white       {
        @if $tone == 1      { @return hsla(0,0,100,$opacity)  }
        @if $tone == 2      { @return hsla(0,10,100,$opacity) }

        }

    @if $key == key {
        @if $tone == 1      { @return #77edf9 }
        @if $tone == 2      { @return #91f3f9
        }
    }

    //@if $key == key {
    //    @if $tone == 1      { @return hsla(228,91,61,$opacity) }
    //    @if $tone == 2      { @return hsla(228,81,55,$opacity) }
    //}
    //@if $key == key {
    //    @if $tone == 1      { @return hsla(236,69,45,$opacity) }
    //    @if $tone == 2      { @return hsla(236,66,43,$opacity) }
    //}

    @if $key == grey {
        @if $tone == 0      { @return #3b3a3a }
        @if $tone > 0       { @return hsla(240,10,(100 - ($tone*5)),$opacity ) }
    }

    @if $key == dark {
        @if $tone == 0      { @return #000 }
        @if $tone > 0       { @return hsla(240,3,(($tone*6)+13),$opacity) }
    }

    @if $key == red {
        @if $tone == 1      { @return hsla(5,80,60,$opacity) }
        @if $tone == 2      { @return hsla(5,80,55,$opacity) }
    }
    @if $key == yellow {
        @if $tone == 1      { @return hsla(40,100,70,$opacity) }
        @if $tone == 2      { @return hsla(40,100,65,$opacity) }
    }
    @if $key == danger {
        @if $tone == 1      { @return hsla(56, 100, 94,$opacity) }
    }
    @if $key == green {
        @if $tone == 1      { @return hsla(145,45,55,$opacity) }
        @if $tone == 2      { @return hsla(145,45,50,$opacity) }
    }
    @if $key == mint {
        @if $tone == 1      { @return hsla(140,60,70,$opacity) }
        @if $tone == 2      { @return hsla(140,60,65,$opacity) }
    }
    @if $key == blue {
        @if $tone == 1      { @return hsla(190,55,65,$opacity) }
        @if $tone == 2      { @return hsla(190,55,60,$opacity) }
    }
    @if $key == violet {
        @if $tone == 1      { @return rgba(105, 36, 106, $opacity)}
        @if $tone == 2      { @return hsla(266,100,42,$opacity) }
    }

    @if $key == bg          { @return hsla(240,27,98,1) }

    @if $key == teal      { @return hsla(172,75,62,1) }

    @if $key == input {
        @if $tone == 1      { @return hsla(240,10,90,.5) }
        @if $tone == 2      { @return hsla(240,10,90,.7) }
    }

    @if $key == pink {
        @return rgba(255, 0, 138, $opacity)
    }

}

@function shadow($key: active) {
    @if $key == active {@return 8px 8px 40px rgba(51, 58, 69, 0.15);}
    @if $key == pop    {@return 8px 8px 40px rgba(0, 0, 0, 0.2), 0px 0px 3px rgba(0, 0, 0, 0.1);}
    @if $key == long    {@return rgba(0, 0, 0, 0.12) 0px 30px 60px;}
    @if $key == inset    {@return inset 0 2px 1.5px rgba(0,0,0,.1)}
    @if $key == normal {@return rgba(73, 80, 87, 0.15) 0px 0px 35px 0px}
}
$textColor: (
    'white': color(white),
    'dark': color(dark),
    'dark-5': color(dark,5),
    'dark-3': color(dark,3),
    'grey': color(grey,0),
    'grey-3': color(grey,3),
    'grey-6': color(grey,5),
    'key': color(key,1),
    'green': color(green,1),
    'red': color(red,1),
    'blue': color(blue,1),
    'violet': color(violet,1),
    'pink': color(pink),
    'light-gradient': color(white)
);
@mixin setColor($param:color,$colors:$textColor) {
    @for $i from 1 to length($colors)+1 {
        &--color-#{nth(map-keys($colors), $i)} {
            #{$param}: #{nth(map-values($colors), $i)};
            @if(nth(map-keys($colors), $i) == 'light-gradient') {
                background: radial-gradient(90.52% 3411.55% at 2.68% 50.63%, #A3E2FF 5.06%, #D4FCF7 63.17%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
    }
}