@use '@mskcc/colors' as c;
@use '_variables.scss' as v;
@use '@mskcc/themes/tokens' as tk;

@mixin msk-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
}

@mixin msk-container-with-padding {
    margin-left: auto;
    margin-right: auto;
    max-width: 1440px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;

    @media (min-width: 1025px) {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

@mixin msk-container-2400 {
    margin-left: auto;
    margin-right: auto;
    max-width: 2400px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@mixin msk-container-fluid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    max-width: 100%;
}

@mixin msk-sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@mixin msk-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@mixin msk-focus {
    *:focus-visible,
    *:focus-visible:hover {
        outline: none;
    }

    *:focus,
    *:focus:hover {
        /* Visible in the full-colour space */
        box-shadow: inset 0 0 0 msk-rem(2px) tk.$msk--color-border-focus-outer,
            inset 0 0 0 msk-rem(3px) tk.$msk--color-border-focus-inner;

        /* Visible in Windows high-contrast themes */
        outline-color: transparent;
        outline-width: 2px;
        outline-style: solid;
    }

    [data-whatintent='keyboard'] *:focus {
        box-shadow: 0 0 0 1px tk.$msk--color-border-focus-inner,
            0 0 0 3px tk.$msk--color-border-focus-outer;
        outline: none;
    }
}

@mixin msk-unstyle-list {
    list-style: none;
    margin: 0;
    padding: 0;

    > li {
        display: block;

        > a {
            display: block;
        }
    }
}

@mixin msk-reset-box-sizing($selector) {
    #{$selector} {
        font-family: inherit;
    }

    #{$selector},
    #{$selector} *,
    #{$selector} *::before,
    #{$selector} *::after {
        box-sizing: border-box;
    }
}

//does not work with colors containing alpha
@function msk-encodecolor($string) {
    @if type-of($string) == 'color' {
        $hex: str-slice(ie-hex-str($string), 4);
        $string: unquote('#{$hex}');
    }
    $string: '%23' + $string;
    @return $string;
}

@mixin msk-checkerboard($color: '#EDEEEF') {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="#{$converted}" x="0" y="0" width="8" height="8"></rect><rect fill="#{$converted}" x="8" y="8" width="8" height="8"></rect></g></svg>');
}

// Convert px to rem
@function msk-rem($px) {
    @if unit($px) != 'px' {
        @error 'Property #{$px} must be in `px`';
    }

    @return calc($px / 16px) * 1rem;
}

//Input focus

@mixin msk-input-focus($remove-inset: false) {
    border-radius: 0.25rem;

    @if $remove-inset {
        box-shadow: 0 0 0 0.125rem tk.$msk--color-border-focus-outer,
            0 0 0 calc(0.125rem + 2px) tk.$msk--color-border-focus-inner;
    } @else {
        box-shadow: inset 0 0 0 0.125rem tk.$msk--color-border-focus-outer,
            inset 0 0 0 calc(0.125rem + 2px) tk.$msk--color-border-focus-inner;
    }
}

//icon background
@mixin msk-icon-background($bg-size: msk-rem(18px)) {
    background-position: center;
    background-size: $bg-size;
    background-repeat: no-repeat;
}

// shared input styles
@mixin msk-input-label-text {
    color: tk.$msk--color-content-input-primary;
    font-size: v.$msk--size-2;
    font-weight: 400;
    line-height: 1.2;
}

@mixin msk-input-default {
    background-color: tk.$msk--color-bg-input;
    border: 1px solid tk.$msk--color-border-input;
    border-radius: msk-rem(4px);
    color: tk.$msk--color-content-input-primary;
    font-size: v.$msk--size-2;
    transition-property: box-shadow, outline;
    transition-duration: 110ms;
    transition-timing-function: ease-in-out;

    &::placeholder {
        color: tk.$msk--color-content-input-secondary;
        font-size: v.$msk--size-2;
    }
    &:hover:not([disabled]) {
        box-shadow: inset 0 0 0 msk-rem(3px)
            tk.$msk--color-border-input-hover-secondary;
    }
    &:active:not(disabled),
    &:focus:not(disabled),
    &:focus:hover:not(disabled) {
        @include msk-input-focus();
        outline-color: transparent;
    }
    &:disabled:hover,
    &:disabled {
        background-color: tk.$msk--color-bg-disabled;
        border-bottom-color: tk.$msk--color-border-disabled; // carbon removes border-bottom
        &:active,
        &:focus {
            box-shadow: none;
        }
    }
}

@mixin msk-input-invalid {
    padding-right: 1rem;
    &:not(:focus) {
        border-color: tk.$msk--color-border-error;
        outline-color: tk.$msk--color-border-error;
    }
    &:focus,
    &:active {
        @include msk-input-focus();
        outline-color: tk.$msk--color-border-error;
    }
}

@mixin msk-icon-bg-invalid($color: '740937') {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="#{$converted}" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="#{$converted}"/></svg>');
}

//----------------------------------------------
// Error and Invalid mixins
// ---------------------------------------------

@mixin input-invalid-focus {
    box-shadow: 0 0 0 msk-rem(1px) tk.$msk--color-border-focus-inner,
        0 0 0 msk-rem(3px) tk.$msk--color-border-error;
}

@mixin msk-invalid-text-with-icon {
    @include msk-icon-bg-invalid();
    background-position: left center;
    background-repeat: no-repeat;
    background-size: msk-rem(22px);
    // color: c.$msk--magenta-80 !important;
    color: purple;
    font-size: 1rem;
    padding: 0 0 0 msk-rem(26px);
}

@mixin msk-input-helper-text {
    color: tk.$msk--color-content-secondary;
    font-size: v.$msk--size-2;
}

@mixin msk-form-vertical-rhythm($row-gap: v.$msk-form-vertical-space) {
    display: grid;
    row-gap: $row-gap;
    margin: 0;
}

$gray: '4D5358';
@mixin msk-icon-bg-clear($color: $gray) {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="#{$converted}" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="#{$converted}"/></svg>');
}

@mixin msk-icon-bg-search($color: $gray) {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="#{$converted}" xmlns="http://www.w3.org/2000/svg"><path d="M15.7549 14.2549H14.9649L14.6849 13.9849C15.6649 12.8449 16.2549 11.3649 16.2549 9.75488C16.2549 6.16488 13.3449 3.25488 9.75488 3.25488C6.16488 3.25488 3.25488 6.16488 3.25488 9.75488C3.25488 13.3449 6.16488 16.2549 9.75488 16.2549C11.3649 16.2549 12.8449 15.6649 13.9849 14.6849L14.2549 14.9649V15.7549L19.2549 20.7449L20.7449 19.2549L15.7549 14.2549ZM9.75488 14.2549C7.26488 14.2549 5.25488 12.2449 5.25488 9.75488C5.25488 7.26488 7.26488 5.25488 9.75488 5.25488C12.2449 5.25488 14.2549 7.26488 14.2549 9.75488C14.2549 12.2449 12.2449 14.2549 9.75488 14.2549Z" fill="#{$converted}"/></svg>');
}

@mixin msk-icon-bg-visibility($color: $gray) {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="#{$converted}" xmlns="http://www.w3.org/2000/svg"><path d="M12 4.5C7 4.5 2.73 7.61 1 12C2.73 16.39 7 19.5 12 19.5C17 19.5 21.27 16.39 23 12C21.27 7.61 17 4.5 12 4.5ZM12 17C9.24 17 7 14.76 7 12C7 9.24 9.24 7 12 7C14.76 7 17 9.24 17 12C17 14.76 14.76 17 12 17ZM12 9C10.34 9 9 10.34 9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9Z" fill="#{$converted}"/></svg>');
}

@mixin msk-icon-bg-visibility_off($color: $gray) {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="#{$converted}" xmlns="http://www.w3.org/2000/svg"><path d="M12 6.46992C14.76 6.46992 17 8.70992 17 11.4699C17 11.9799 16.9 12.4699 16.76 12.9299L19.82 15.9899C21.21 14.7599 22.31 13.2199 23 11.4599C21.27 7.07992 17 3.96992 12 3.96992C10.73 3.96992 9.51 4.16992 8.36 4.53992L10.53 6.70992C11 6.56992 11.49 6.46992 12 6.46992ZM3.42 2.41992L2.01 3.83992L4.69 6.51992C3.06 7.79992 1.77 9.49992 1 11.4699C2.73 15.8599 7 18.9699 12 18.9699C13.52 18.9699 14.97 18.6699 16.31 18.1499L19.74 21.5799L21.15 20.1699L3.42 2.41992ZM12 16.4699C9.24 16.4699 7 14.2299 7 11.4699C7 10.6999 7.18 9.96992 7.49 9.32992L9.06 10.8999C9.03 11.0799 9 11.2699 9 11.4699C9 13.1299 10.34 14.4699 12 14.4699C12.2 14.4699 12.38 14.4399 12.57 14.3999L14.14 15.9699C13.49 16.2899 12.77 16.4699 12 16.4699ZM14.97 11.1399C14.82 9.73992 13.72 8.64992 12.33 8.49992L14.97 11.1399Z" fill="#{$converted}"/></svg>');
}

@mixin msk-icon-bg-expand_more($color: $gray) {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="#{$converted}" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.29492L12 12.8749L7.41 8.29492L6 9.70492L12 15.7049L18 9.70492L16.59 8.29492Z" fill="#{$converted}"/></svg>"/></svg>');
}

@mixin msk-icon-bg-check($color: '#EDEEEF') {
    $converted: msk-encodecolor($color);
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.79508 15.875L4.62508 11.705L3.20508 13.115L8.79508 18.705L20.7951 6.70504L19.3851 5.29504L8.79508 15.875Z" fill="#{$converted}"/></svg>');
}

//----------------------------------------------
// Edge mixins
// ---------------------------------------------

/* ------ buttons ----- */
@mixin msk-btn-default {
    border-radius: msk-rem(4px);
    line-height: 1;
    font-weight: v.$button-font-weight;
    transition-property: background-color, color, border;
    transition-duration: 110ms;
    transition-timing-function: ease-in-out;
    // Turns off underline for buttons as links
    &:hover,
    &:focus,
    &:active {
        text-decoration: unset;
        box-shadow: none;
    }

    &:focus {
        @include msk-input-focus;
        border-color: tk.$msk--color-border-focus-outer;
    }
}

@mixin msk-btn-icon-color {
    > .material-icons-sharp,
    > .msk-icon {
        align-self: baseline;
        color: inherit;
        font-size: v.$msk--button-icon-size;
    }
}

@mixin msk-btn-primary($include-icon-color: true) {
    @if $include-icon-color {
        @include msk-btn-icon-color;
    }
    background-color: c.$msk--blue-70;
    color: c.$msk--white-0;

    &:focus,
    &:hover {
        background-color: c.$msk--blue-80;
    }

    &:active {
        background-color: c.$msk--blue-90;
    }

    &:visited {
        color: c.$msk--white-0;
    }
}

@mixin msk-btn-tertiary($include-icon-color: true) {
    @if $include-icon-color {
        @include msk-btn-icon-color;
    }
    background-color: transparent;
    color: c.$msk--blue-70;
    border-color: c.$msk--blue-70;
    border-width: msk-rem(2px);

    &:focus,
    &:hover {
        background-color: c.$msk--blue-10;
        color: c.$msk--blue-80;
        border-color: c.$msk--blue-80;
    }

    &:active {
        background-color: c.$msk--blue-20;
        color: c.$msk--blue-90;
        border-color: c.$msk--blue-90;
    }

    &:visited {
        color: c.$msk--blue-70;
    }
}

@mixin msk-btn-ghost($include-icon-color: true) {
    @if $include-icon-color {
        @include msk-btn-icon-color;
    }
    background-color: transparent;
    color: c.$msk--blue-70;

    &:focus,
    &:hover {
        background-color: c.$msk--cool-gray-10;
        color: c.$msk--blue-80;
    }

    &:active {
        background-color: c.$msk--cool-gray-20;
        color: c.$msk--blue-90;
    }

    &:visited {
        color: c.$msk--blue-70;
    }
}

@mixin msk-btn-danger($include-icon-color: true) {
    @if $include-icon-color {
        @include msk-btn-icon-color;
    }
    background-color: c.$msk--red-70;
    color: c.$msk--white-0;

    &:focus,
    &:hover {
        background-color: c.$msk--red-80;
    }

    &:active {
        background-color: c.$msk--red-90;
    }

    &:visited {
        color: c.$msk--white-0;
    }
}

@mixin msk-btn-danger-ghost($include-icon-color: true) {
    @if $include-icon-color {
        @include msk-btn-icon-color;
    }
    background-color: transparent;
    color: c.$msk--red-70;

    &:focus,
    &:hover {
        background-color: c.$msk--red-10;
        color: c.$msk--red-80;
    }

    &:active {
        background-color: c.$msk--red-20;
        color: c.$msk--red-90;
    }

    &:visited {
        color: c.$msk--red-70;
    }
}

@mixin msk-btn-disabled {
    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
        color: tk.$msk--color-content-inverse-disabled;

        > .material-icons-sharp,
        > .msk-icon {
            color: tk.$msk--color-content-inverse-disabled;
        }
    }
}

@mixin msk-edge-btn-default {
    font-size: v.$msk--btn-font-size;
    font-weight: v.$msk--btn-font-weight;
    padding: v.$msk--btn-padding;
    border-radius: v.$msk--btn-border-radius;
    line-height: 1;
    position: relative;
    display: inline-flex;
    align-items: center;
    width: max-content;
    height: max-content;
    min-height: msk-rem(48px);
    flex-shrink: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    border-width: 2px;
    border-style: solid;

    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.msk-btn--disabled,
    &.msk-btn--disabled:hover,
    &.msk-btn--disabled:focus {
        color: tk.$msk--color-content-inverse-disabled;
        box-shadow: none;
        cursor: not-allowed;
    }

    &:not(:disabled):focus,
    &:not(:disabled):focus:active {
        box-shadow: inset 0 0 0 msk-rem(2px) c.$msk--white-0;
        border-color: c.$msk--black-100;
    }
}

@mixin msk-edge-btn-disabled-solid {
    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.msk-btn--disabled,
    &.msk-btn--disabled:hover,
    &.msk-btn--disabled:focus {
        border-color: tk.$msk--color-bg-inverse-disabled;
        background: tk.$msk--color-bg-inverse-disabled;
        color: tk.$msk--color-content-inverse-disabled;
    }
}
@mixin msk-edge-btn-disabled-tertiary {
    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.msk-btn--disabled,
    &.msk-btn--disabled:hover,
    &.msk-btn--disabled:focus {
        border-color: tk.$msk--color-border-disabled;
        background: tk.$msk--color-bg-disabled;
        color: tk.$msk--color-content-disabled;
    }
}
@mixin msk-edge-btn-disabled-ghost {
    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.msk-btn--disabled,
    &.msk-btn--disabled:hover,
    &.msk-btn--disabled:focus {
        border-color: tk.$msk--color-bg-disabled;
        background: tk.$msk--color-bg-disabled;
        color: tk.$msk--color-content-disabled;
    }
}

@mixin msk-edge-btn-primary {
    @include msk-edge-btn-disabled-solid;

    background-color: tk.$msk--color-bg-action-primary;
    border-color: tk.$msk--color-bg-action-primary;
    color: tk.$msk--color-content-action-primary;

    &:focus,
    &:hover {
        background-color: tk.$msk--color-bg-action-primary-hover;
    }

    &:hover {
        border-color: tk.$msk--color-bg-action-primary-hover;
    }

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

@mixin msk-edge-btn-secondary {
    @include msk-edge-btn-disabled-solid;

    background-color: c.$msk--gray-70;
    border-color: c.$msk--gray-70;
    color: c.$msk--white-0;

    &:focus,
    &:hover {
        background-color: c.$msk--gray-80;
    }

    &:hover {
        border-color: c.$msk--gray-80;
    }

    &:active {
        background-color: c.$msk--gray-90;
        border-color: c.$msk--gray-90;
    }
    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.msk-btn--disabled,
    &.msk-btn--disabled:hover,
    &.msk-btn--disabled:focus {
        border-color: v.$msk--input-disabled-bg-color;
        background: v.$msk--input-disabled-bg-color;
    }
}

@mixin msk-edge-btn-tertiary {
    @include msk-edge-btn-disabled-tertiary;

    background-color: transparent;
    border-color: tk.$msk--color-border-action-secondary;
    color: tk.$msk--color-border-action-secondary;

    &:focus,
    &:hover {
        background-color: tk.$msk--color-bg-action-hover;
        color: tk.$msk--color-content-action-secondary-hover;
    }
    &:hover {
        border-color: tk.$msk--color-border-action-secondary-hover;
    }

    &:active {
        background-color: tk.$msk--color-bg-action-active;
        color: tk.$msk--color-content-action-secondary-active;
        border-color: tk.$msk--color-border-action-secondary-active;
    }
}

@mixin msk-edge-btn-ghost {
    @include msk-edge-btn-disabled-ghost;

    background-color: transparent;
    border-color: transparent;
    color: tk.$msk--color-content-action-secondary;

    &:focus,
    &:hover {
        background-color: tk.$msk--color-bg-action-hover;
        color: tk.$msk--color-content-action-secondary-hover;
    }
    &:hover {
        border-color: tk.$msk--color-bg-action-hover;
    }

    &:active {
        background-color: tk.$msk--color-bg-action-active;
        color: tk.$msk--color-content-action-secondary-active;
        border-color: tk.$msk--color-bg-action-active;
    }
}

@mixin msk-edge-btn-danger {
    @include msk-edge-btn-disabled-solid;

    background-color: tk.$msk--color-bg-action-primary-danger;
    border-color: tk.$msk--color-bg-action-primary-danger;
    color: tk.$msk--color-content-action-primary;

    &:focus,
    &:hover {
        background-color: tk.$msk--color-bg-action-primary-danger-hover;
    }

    &:hover {
        border-color: tk.$msk--color-bg-action-primary-danger-hover;
    }

    &:active {
        background-color: tk.$msk--color-bg-action-primary-danger-active;
        border-color: tk.$msk--color-bg-action-primary-danger-active;
    }
}

@mixin msk-edge-btn-danger-tertiary {
    @include msk-edge-btn-disabled-tertiary;
    background-color: transparent;
    border-color: tk.$msk--color-bg-action-primary-danger;
    color: tk.$msk--color-content-action-danger;

    &:focus,
    &:hover {
        background-color: tk.$msk--color-bg-action-danger-hover;
        color: tk.$msk--color-content-action-danger-hover;
    }
    &:hover {
        border-color: tk.$msk--color-bg-action-primary-danger-hover;
    }

    &:active {
        background-color: tk.$msk--color-bg-action-danger-active;
        color: tk.$msk--color-content-action-danger-active;
        border-color: tk.$msk--color-bg-action-primary-danger-active;
    }
}

@mixin msk-edge-btn-danger-ghost {
    @include msk-edge-btn-disabled-ghost;
    background-color: transparent;
    border-color: transparent;
    color: tk.$msk--color-content-action-danger;

    &:focus,
    &:hover {
        background-color: tk.$msk--color-bg-action-danger-hover;
        color: tk.$msk--color-content-action-danger-hover;
    }
    &:hover {
        border-color: tk.$msk--color-bg-action-danger-hover;
    }

    &:active {
        background-color: tk.$msk--color-bg-action-danger-active;
        color: tk.$msk--color-content-action-danger-active;
        border-color: tk.$msk--color-bg-action-danger-active;
    }
}

/* ------ typography ----- */
// Font sizes
$msk--font-sizes: (
    1: v.$msk--size-1,
    2: v.$msk--size-2,
    3: v.$msk--size-3,
    4: v.$msk--size-4,
    5: v.$msk--size-5,
    6: v.$msk--size-6,
    7: v.$msk--size-7,
    8: v.$msk--size-8,
    9: v.$msk--size-9,
    10: v.$msk--size-10,
    11: v.$msk--size-11,
);

$msk--heading-variables: (
    display-1: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 11),
        line-height: 1.3,
    ),
    display-2: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 10),
        line-height: 1.3,
    ),
    display-3: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 9),
        line-height: 1.3,
    ),
    display-4: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 8),
        line-height: 1.3,
    ),
    h1: (
        font-weight: 400,
        font-size: map-get($msk--font-sizes, 7),
        line-height: 1.3,
        letter-spacing: -0.05rem,
    ),
    h2: (
        font-weight: 400,
        font-size: map-get($msk--font-sizes, 6),
        line-height: 1.3,
        letter-spacing: -0.05rem,
    ),
    h3: (
        font-weight: 400,
        font-size: map-get($msk--font-sizes, 5),
        line-height: 1.4,
        letter-spacing: -0.03rem,
    ),
    h4: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 4),
        line-height: 1.5,
        letter-spacing: -0.02rem,
    ),
    h5: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 3),
        line-height: 1.5,
    ),
    h6: (
        font-weight: 500,
        font-size: map-get($msk--font-sizes, 2),
        line-height: 1.6,
    ),
    p: (
        font-weight: 400,
        font-size: map-get($msk--font-sizes, 2),
        line-height: 1.75,
    ),
);

@mixin msk-heading($heading) {
    @if map-has-key($msk--heading-variables, $heading) {
        $styles: map-get($msk--heading-variables, $heading);
        @each $property, $value in $styles {
            #{$property}: $value;
        }
    }
}

@mixin msk-type-style($heading) {
    @if map-has-key($msk--heading-variables, $heading) {
        $styles: map-get($msk--heading-variables, $heading);
        @each $property, $value in $styles {
            #{$property}: $value;
        }
    }
}

@mixin msk-edge-input-focus($radius: 0.25rem) {
    &:focus,
    &:focus:hover {
        border-radius: $radius;
        box-shadow: inset 0 0 0 msk-rem(2px) tk.$msk--color-border-focus-outer,
            inset 0 0 0 msk-rem(4px) tk.$msk--color-border-focus-inner;
    }
}

@mixin msk-edge-input-focus-border {
    box-shadow: inset 0 0 0 msk-rem(1px) tk.$msk--color-border-focus-outer,
        inset 0 0 0 msk-rem(3px) tk.$msk--color-border-focus-inner;
    outline-color: tk.$msk--color-border-focus-outer;
}

@mixin msk-edge-input-default {
    background-color: tk.$msk--color-bg-input;
    border: 1px solid tk.$msk--color-border-input;
    border-radius: msk-rem(4px);
    color: tk.$msk--color-content-input-primary;
    font-size: v.$msk--size-2;
    transition-property: box-shadow, outline;
    transition-duration: 110ms;
    transition-timing-function: ease-in-out;

    &::placeholder {
        color: tk.$msk--color-content-input-secondary;
        font-size: v.$msk--size-2;
    }
    &:hover:not([disabled]) {
        box-shadow: inset 0 0 0 msk-rem(3px)
            tk.$msk--color-border-input-hover-secondary;
    }
    &:active:not(disabled),
    &:focus:not(disabled),
    &:focus:hover:not(disabled) {
        @include msk-edge-input-focus-border;
    }
    &:disabled:hover,
    &:disabled {
        background-color: tk.$msk--color-bg-disabled;
        border-bottom-color: tk.$msk--color-border-disabled; // carbon removes border-bottom
        &:active,
        &:focus {
            box-shadow: none;
        }
    }
}