@import "../functions/get-nested-property";

$colors: (
    primary: (
        bg: $component-clickable-primary-background,
        bg-hover: $component-clickable-primary-background-hover,
        bg-active: $component-clickable-primary-background-active,
        text: $component-clickable-primary-text,
        text-hover: $component-clickable-primary-text-hover,
        text-active: $component-clickable-primary-text-active
    ), 
    neutral: (
        bg: $component-clickable-neutral-background,
        bg-hover: $component-clickable-neutral-background-hover,
        bg-active: $component-clickable-neutral-background-active,
        text: $component-clickable-neutral-text,
        text-hover: $component-clickable-neutral-text-hover,
        text-active: $component-clickable-neutral-text-active
    ), 
    disabled: (
        bg: $component-clickable-disabled-background,
        bg-hover: $component-clickable-disabled-background-hover,
        bg-active: $component-clickable-disabled-background-active,
        text: $component-clickable-disabled-text,
        text-hover: $component-clickable-disabled-text-hover,
        text-active: $component-clickable-disabled-text-active
    ), 
    positive: (
        bg: $component-clickable-positive-background,
        bg-hover: $component-clickable-positive-background-hover,
        bg-active: $component-clickable-positive-background-active,
        text: $component-clickable-positive-text,
        text-hover: $component-clickable-positive-text-hover,
        text-active: $component-clickable-positive-text-active
    ), 
    negative: (
        bg: $component-clickable-negative-background,
        bg-hover: $component-clickable-negative-background-hover,
        bg-active: $component-clickable-negative-background-active,
        text: $component-clickable-negative-text,
        text-hover: $component-clickable-negative-text-hover,
        text-active: $component-clickable-negative-text-active
    )
);

@mixin clickable($feedback-type) {
    background-color: get-nested-property($colors, $feedback-type, "bg");
    color: get-nested-property($colors, $feedback-type, "text");
    cursor: pointer;
    text-decoration: none;

    &:hover {
        background-color: get-nested-property($colors, $feedback-type, "bg-hover");
        color: get-nested-property($colors, $feedback-type, "text-hover");
    }

    &:active {
        background-color: get-nested-property($colors, $feedback-type, "bg-active");
        color: get-nested-property($colors, $feedback-type, "text-active");
    }

    &[data-disabled="true"] {
        background-color: get-nested-property($colors, disabled, "bg");
        color: get-nested-property($colors, disabled, "text");
        cursor: default;
    }
}