@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;

@mixin msk-tile {
    .msk-tile {
        background-color: tk.$msk--color-bg;
        color: tk.$msk--color-content-primary;
        border-radius: m.msk-rem(8px);
        display: block;
        line-height: v.$msk--global-line-height;
        padding: 0;
        transition-duration: 110ms;
        transition-property: background-color, color, outline, box-shadow,
            border;
        transition-timing-function: cubic-bezier(0.22, 0.59, 0.88, 0.41);
        width: 100%;

        .msk--h3 ~ .msk--p {
            margin-top: 0;
        }

        &.msk-tile-default {
            box-shadow: v.$msk--elevation-plus-03;
        }

        &.msk-tile-outline {
            border: m.msk-rem(1px) solid tk.$msk--color-border;
            box-shadow: unset;
        }

        &.msk-tile-ghost {
            background-color: transparent;
            border: none;
            box-shadow: unset;
        }

        &.msk-tile-clickable {
            cursor: pointer;
            text-align: left;

            &:not(.msk-tile-ghost) {
                border-color: tk.$msk--color-border-link;
                border-style: solid;
                border-width: 2px;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: tk.$msk--color-content-action-secondary;
            }

            &:hover,
            &:focus,
            &:focus-within {
                background-color: tk.$msk--color-bg-action-hover;
                border-color: tk.$msk--color-border-link-hover;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: tk.$msk--color-content-action-secondary-hover;
                }

                &.msk-tile-ghost {
                    background-color: c.$msk--cool-gray-10;
                }
            }

            &:focus,
            &:focus-within {
                border-radius: m.msk-rem(8px);
                box-shadow: 0 0 0 m.msk-rem(3px)
                        tk.$msk--color-border-focus-outer,
                    0 0 0 m.msk-rem(1px) tk.$msk--color-border-focus-inner;
            }

            &:active {
                background-color: tk.$msk--color-bg-action-active;
                border-color: tk.$msk--color-border-link-active;

                h1,
                h2,
                h3,
                h4,
                h5,
                h6 {
                    color: tk.$msk--color-content-action-secondary-active;
                }

                &.msk-tile-ghost {
                    background-color: transparent;
                }
            }
        }
    }
}