@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/link';

@mixin msk-link {
    @include link.link;

    .msk-link-button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .msk-link,
    .msk-link:visited {
        color: tk.$msk--color-content-link;
        text-decoration: none;

        &:hover {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0
                tk.$msk--color-content-link-hover;
            color: tk.$msk--color-content-link-hover;
        }

        &:active,
        &:active:hover {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0
                tk.$msk--color-content-link-active;
            color: tk.$msk--color-content-link-active;
        }

        &:focus,
        &:focus:hover,
        &:focus:active,
        &:focus:active:hover {
            border-radius: 0.25rem;
            box-shadow: 0 0 0 m.msk-rem(1px) tk.$msk--color-border-focus-inner,
                0 0 0 calc(msk-rem(1px) + m.msk-rem(2px))
                    tk.$msk--color-border-focus-outer;
            outline: none;
            transition: none;
        }
    }

    p > .msk-link,
    .msk-link.msk-link-underline {
        box-shadow: inset 0 m.msk-rem(-1px) 0 0 tk.$msk--color-content-link;

        &:hover {
            box-shadow: inset 0 m.msk-rem(-2px) 0 0
                tk.$msk--color-content-link-hover;
            color: tk.$msk--color-content-link-hover;
        }

        &:active,
        &:active:hover {
            box-shadow: inset 0 m.msk-rem(-2px) 0 0
                tk.$msk--color-content-link-active;
            color: tk.$msk--color-content-link-active;
        }

        &:focus,
        &:focus:hover,
        &:focus:active,
        &:focus:active:hover {
            border-radius: 0.25rem;
            box-shadow: 0 0 0 m.msk-rem(1px) tk.$msk--color-border-focus-inner,
                0 0 0 calc(msk-rem(1px) + m.msk-rem(2px))
                    tk.$msk--color-border-focus-outer;
            outline: none;
        }
    }

    .msk-link,
    .msk-link:visited,
    .msk-link.#{$prefix}--link,
    .msk-link.#{$prefix}--inline-link,
    .msk-link.#{$prefix}--link:visited,
    .msk-link.#{$prefix}--inline-link:visited {
        display: inline;
        font-size: inherit;
        text-decoration: none;

        &.msk--size-11 {
            font-size: v.$msk--size-11;
        }

        &.msk--size-10 {
            font-size: v.$msk--size-10;
        }

        &.msk--size-9 {
            font-size: v.$msk--size-9;
        }

        &.msk--size-8 {
            font-size: v.$msk--size-8;
        }

        &.msk--size-7 {
            font-size: v.$msk--size-7;
        }

        &.msk--size-6 {
            font-size: v.$msk--size-6;
        }

        &.msk--size-5 {
            font-size: v.$msk--size-5;
        }

        &.msk--size-4 {
            font-size: v.$msk--size-4;
        }

        &.msk--size-3 {
            font-size: v.$msk--size-3;
        }

        &.msk--size-2 {
            font-size: v.$msk--size-2;
        }

        &.msk--size-1 {
            font-size: v.$msk--size-1;
        }
    }

    .msk-link > .material-icons-sharp,
    .msk-link > .msk-icon {
        color: inherit;
        font-size: inherit;
        position: relative;
        top: m.msk-rem(2px);
        transition: inherit;
    }

    .msk-link-gray,
    .msk-link-gray:visited {
        color: c.$msk--cool-gray-90;

        &:hover {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0 c.$msk--cool-gray-100;
            color: c.$msk--cool-gray-100;
        }

        &:active,
        &:active:hover {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0 c.$msk--black-100;
            color: c.$msk--black-100;
        }

        &.msk-link-underline {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0 c.$msk--cool-gray-90;

            &:hover {
                box-shadow: inset 0 m.msk-rem(-2px) 0 0 c.$msk--cool-gray-100;
                color: c.$msk--cool-gray-100;
            }

            &:active,
            &:active:hover {
                box-shadow: inset 0 m.msk-rem(-2px) 0 0 c.$msk--black-100;
                color: c.$msk--black-100;
            }
        }

        > .material-icons-sharp,
        > .msk-icon {
            color: inherit;
        }
    }

    .msk-link-white,
    .msk-link-white:visited {
        color: c.$msk--white-0;

        &:hover {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0 c.$msk--cool-gray-10;
            color: c.$msk--cool-gray-10;
        }

        &:active,
        &:active:hover {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0 c.$msk--cool-gray-20;
            color: c.$msk--cool-gray-20;
        }

        &.msk-link-underline {
            box-shadow: inset 0 m.msk-rem(-1px) 0 0 c.$msk--white-0;

            &:hover,
            &:visited:hover {
                box-shadow: inset 0 m.msk-rem(-2px) 0 0 c.$msk--cool-gray-10;
                color: c.$msk--cool-gray-10;
            }

            &:active,
            &:active:hover {
                box-shadow: inset 0 m.msk-rem(-2px) 0 0 c.$msk--cool-gray-20;
                color: c.$msk--cool-gray-20;
            }
        }

        > .material-icons-sharp,
        > .msk-icon {
            color: inherit;
        }
    }

    .msk-link-no-underline,
    .msk-link-no-underline:hover,
    .msk-link-no-underline:visited,
    .msk-link-no-underline:active {
        box-shadow: none;
        text-decoration: none;
    }

    // Handle carbon-component-react renderIcon prop
    .msk-link .#{$prefix}--link__icon {
        margin-left: m.msk-rem(5px);

        .msk-icon {
            font-size: inherit;
            position: relative;
            top: m.msk-rem(2px);
        }
    }
}