@use "../abstracts/colors" as colors;

$colors: colors.$colors;

.link {
    padding-block: var(--link-padding-y);
    padding-inline: var(--link-padding-x);
    border-radius: var(--link-border-radius);
    border-style: var(--link-border-style);
    border-width: var(--link-border-width);
    border-color: var(--color-transparent);
    background-color: var(--color-transparent);
    text-decoration: underline;
    color: var(--text-color);
    text-decoration-color: var(--text-color);

    &:not(:disabled):hover {
        background-color: var(--color-transparent);
        color: var(--hover-defaut);
        text-decoration-color: var(--hover-defaut);
    }

    &:not(:disabled):active,
    &:not(:disabled).active {
        background-color: var(--color-transparent);
        color: var(--active-defaut);
        text-decoration-color: var(--active-defaut);
    }

    &:not(:disabled):focus-visible {
        outline: none;
        border-color: var(--text-color);
        box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--text-color) 50%, transparent);
    }
    &:disabled {
        background-color: var(--color-transparent);
        border-color: var(--color-transparent);
        text-decoration-color: var(--link-disabled-color);
        color: var(--link-disabled-color);
        opacity: 0.5;
    }
}

@each $name, $value in $colors {
    .link-#{$name} {
        padding-block: var(--link-padding-y);
        padding-inline: var(--link-padding-x);
        border-radius: var(--link-border-radius);
        border-style: var(--link-border-style);
        border-width: var(--link-border-width);
        border-color: var(--color-transparent);
        background-color: var(--color-transparent);
        text-decoration: underline;
        color: #{$value};
        text-decoration-color: #{$value};

        &:not(:disabled):hover {
            background-color: var(--color-transparent);
            color: var(--hover-#{$name});
            text-decoration-color: var(--hover-#{$name});
        }

        &:not(:disabled):active,
        &:not(:disabled).active {
            background-color: var(--color-transparent);
            color: var(--active-#{$name});
            text-decoration-color: var(--active-#{$name});
        }

        &:not(:disabled):focus-visible {
            outline: none;
            border-color: #{$value};
            box-shadow: 0 0 0.5rem 0.25rem color-mix(in srgb, #{$value} 50%, transparent);
        }

        &:disabled {
            background-color: var(--color-transparent);
            border-color: var(--color-transparent);
            text-decoration-color: var(--link-disabled-color);
            color: var(--link-disabled-color);
            opacity: 0.5;
        }
    }
}