:root {
    --icon-mtds-accessibility-focus-colour: var(--nav-ds-keyboard-focus-colour);
    --icon-mtds-accessibility-focus-outline: var(--nav-ds-keyboard-focus-outline);

    --icon-mtds-global-animation-duration: 0.2s;
    --icon-mtds-global-animation-large-footprint-duration: 1s;
    --icon-mtds-global-font-size: 14px;
    --icon-mtds-global-font-weight: 500;
    --icon-mtds-global-font-colour: var(--icon-ds-global-font-colour);
    --icon-mtds-global-body-background-colour: var(--icon-ds-global-background-colour);
    --icon-mtds-global-border-radius: 4px;
    --icon-mtds-global-border-primary-colour: #E3E7F6;  /* Applies to elements higher up in the hierarchy/containers & inputs??? */
    --icon-mtds-global-border-secondary-colour: #CED5DE; /* Applies to some sub-headings & one-off unique components?? */

    --icon-mtds-global-header-large-font-size: 20px;
    --icon-mtds-global-header-large-font-weight: 600;
    --icon-mtds-global-header-large-font-weight-user-alternate: 800;
    --icon-mtds-global-header-large-font-gutter: 12px; /* TBD -- Forms-Specific */

    --icon-mtds-global-header-medium-font-size: 16px;
    --icon-mtds-global-header-medium-font-weight: var(--icon-mtds-global-header-large-font-weight);
    --icon-mtds-global-header-medium-font-gutter: 28px; /* Move... - FORMS-Specific????? */

    --icon-mtds-tab-body-font-colour: var(--icon-mtds-global-font-colour);
    --icon-mtds-tab-body-background-primary-colour: #F4F5FA;
    --icon-mtds-tab-body-background-secondary-colour: #E7E9EC;  /* NOTE: nested WITHIN primary colour i.e. hovered element */
    --icon-mtds-tab-body-background-secondary-draggable-colour: #9DA4B2;  /* Drag-and-drop textured dots within nested header */
    --icon-mtds-tab-body-background-secondary-action-colour: #A1A9B4;  /* Action buttons within within nested container */
    --icon-mtds-tab-body-background-secondary-action-secondary-colour: #5C6068;  /* Expand/Collapse caret within nested header */
    --icon-mtds-tab-body-content-container-border: 1px solid var(--icon-mtds-global-border-colour);
    --icon-mtds-tab-body-content-container-background: var(--icon-mtds-global-body-background-colour);

    --icon-mtds-pill-draggable-border: 1px solid var(--icon-mtds-global-border-secondary-colour);  /* Drag-and-drop components/Form Builder */
    --icon-mtds-pill-draggable-font-size: 12px;
    --icon-mtds-pill-draggable-font-weight: 400;

    --icon-mtds-input-text-border: 1px solid var(--icon-mtds-global-border-colour);
    --icon-mtds-input-button-font-size: 12px;
    --icon-mtds-input-button-font-family: 'Inter', 'Segoe UI', sans-serif;

    --icon-mtds-label-font-size: var(--icon-mtds-global-font-size);
    --icon-mtds-label-font-gutter: 16px;
    --icon-mtds-label-font-weight: var(--icon-mtds-global-header-large-font-weight);
}

:root body.experimental-dark-mode {
    --icon-mtds-global-font-colour: #CECECE;  /* Duplicate declaration - needs updating in IconDesignSystem.css also */
    --icon-mtds-global-body-background-colour: #1C1C1C;  /* Duplicate declaration - needs updating in IconDesignSystem.css also */
    --icon-mtds-global-border-primary-colour: #262626;
    --icon-mtds-global-border-secondary-colour: #3A3A3A;
    --icon-mtds-tab-body-font-colour: var(--icon-mtds-global-font-colour);
    --icon-mtds-tab-body-background-primary-colour: #151515;
    --icon-mtds-tab-body-background-secondary-colour: #1C1C1C;
    --icon-mtds-tab-body-background-secondary-draggable-colour: #FFFFFF;
    --icon-mtds-tab-body-background-secondary-action-colour: #0FF;
    --icon-mtds-tab-body-background-secondary-action-secondary-colour: #F00;
    --icon-mtds-pill-draggable-border: 1px solid var(--icon-mtds-global-border-secondary-colour);
    --icon-mtds-input-text-border: 1px solid var(--icon-mtds-global-border-colour);
}

/* #region Fonts */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 400 600 900;
    font-display: swap;
    src: url('../../../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}
/* #endregion */

/* #region Tab Container & Tab Content Container */
.container-full .icon-mtds-tab-body-container {
    margin-left: -15px;
    margin-right: -15px;
}

.icon-mtds-tab-body-container {
    background-color: var(--icon-mtds-tab-body-background-primary-colour);
}

.icon-mtds-tab-body-content-container {
    padding: 16px;
    border: var(--icon-mtds-tab-body-content-container-border);
    background-color: var(--icon-mtds-tab-body-content-container-background);
}
/* #endregion */

/* #region General Content Container */
.icon-mtds-page-content-container {
    color: var(--icon-mtds-global-font-colour);
    padding: 20px 16px;
    border-radius: var(--icon-mtds-global-border-radius);
    border: 1px solid var(--icon-mtds-global-border-primary-colour);
    background-color: var(--icon-mtds-global-body-background-colour);
}
/* #endregion */

/* #region Action Buttons */
.icon-mtds-page-action-container,
.icon-mtds-modal-action-container {
    font-family: var(--icon-mtds-input-button-font-family);
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-template-rows: minmax(26px, auto);
    grid-gap: 8px;
}

icon-mtds-modal-action-container {
    padding: 12px 24px;
}

.icon-mtds-page-action-container > button,
.icon-mtds-page-action-container > input[type='button'], 
.icon-mtds-page-action-container > input[type='submit'],
.icon-mtds-modal-action-container > button,
.icon-mtds-modal-action-container > input[type='button'], 
.icon-mtds-modal-action-container > input[type='submit'] {
    font-family: inherit;
    font-size: var(--icon-mtds-input-button-font-size);
    border: none;
    background: transparent;
    color: #5C6068;
    font-weight: 600;
    padding-left: 0;
    padding-right: 0;
}

.icon-mtds-page-action-container > button:last-child,
.icon-mtds-page-action-container > input[type='button']:last-child,
.icon-mtds-page-action-container > input[type='submit']:last-child,
.icon-mtds-modal-action-container > button:last-child,
.icon-mtds-modal-action-container > input[type='button']:last-child,
.icon-mtds-modal-action-container > input[type='submit']:last-child {
    color: #428BCA;
    color: var(--client-primary-text);
    background-color: var(--client-primary);
    border: 1px solid #428BCA;
    border: 1px solid var(--client-primary);
    border-radius: var(--icon-mtds-global-border-radius);
    padding: 4px 8px;
}

/* #endregion */

/* #region SVG clip-path icons */
.icon-mtds-svg-grab-texture,
.icon-mtds-svg-grab-texture::before,
.icon-mtds-svg-grab-texture-small,
.icon-mtds-svg-grab-texture-small::before {
    display: inline-block;
    height: 22px;
    width: 16px;
    content: '';
}

.icon-mtds-svg-grab-texture-small,
.icon-mtds-svg-grab-texture-small::before {
    height: 11px;
}

.icon-mtds-svg-grab-texture::before,
.icon-mtds-svg-grab-texture-small::before {
    background-color: var(--icon-mtds-tab-body-background-secondary-draggable-colour);
}

.icon-mtds-svg-grab-texture::before,
.icon-mtds-svg-grab-texture-small::before {
    clip-path: path('M 0 0\
            M 16 0\
            M 16 22\
            M 0 22\
            M 0 0\
            M 6 0 A 1 1 0 0 1 6 2\
            M 6 2 A 1 1 0 0 1 6 0\
            M 10 0 A 1 1 0 0 1 10 2\
            M 10 2 A 1 1 0 0 1 10 0\
            M 6 4 A 1 1 0 0 1 6 6\
            M 6 6 A 1 1 0 0 1 6 4\
            M 10 4 A 1 1 0 0 1 10 6\
            M 10 6 A 1 1 0 0 1 10 4\
            M 6 8 A 1 1 0 0 1 6 10\
            M 6 10 A 1 1 0 0 1 6 8\
            M 10 8 A 1 1 0 0 1 10 10\
            M 10 10 A 1 1 0 0 1 10 8\
            M 6 12 A 1 1 0 0 1 6 14\
            M 6 14 A 1 1 0 0 1 6 12\
            M 10 12 A 1 1 0 0 1 10 14\
            M 10 14 A 1 1 0 0 1 10 12\
            M 6 16 A 1 1 0 0 1 6 18\
            M 6 18 A 1 1 0 0 1 6 16\
            M 10 16 A 1 1 0 0 1 10 18\
            M 10 18 A 1 1 0 0 1 10 16\
            M 6 20 A 1 1 0 0 1 6 22\
            M 6 22 A 1 1 0 0 1 6 20\
            M 10 20 A 1 1 0 0 1 10 22\
            M 10 22 A 1 1 0 0 1 10 20');
}

/* Forms-Specific: for tiles nested inside a group, show an even narrower drag indicator
.formsv2-tile-nested-container .formsv2-tile-nested-container > .formsv2-tile-form-content > .icon-mtds-svg-grab-texture-small,
.formsv2-tile-nested-container .formsv2-tile-nested-container > .formsv2-tile-form-content > .icon-mtds-svg-grab-texture-small::before {
    width: 8px;
}

.formsv2-tile-nested-container .formsv2-tile-nested-container > .formsv2-tile-form-content > .icon-mtds-svg-grab-texture-small::before {
    clip-path: path('M 0 0\
            M 8 0\
            M 8 10\
            M 0 10\
            M 0 0\
            M 0 1 A 1 1 0 0 1 2 1 L 2 9\
            A 1 1 0 0 1 0 9 L 0 1');
}*/
/* #endregion */

/* #region Alert Bars */
.icon-mtds-alert {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-template-rows: minmax(26px, auto);
    grid-gap: 8px;

    justify-items: start;
    align-items: center;

    padding: 10px 24px;
    background-color: #EBF9FF;
    color: #124053;
    font-family: var(--icon-mtds-input-button-font-family);
}

.icon-mtds-alert > :first-child {
    color: #11AFEA;
    font-size: 34px;
    margin-bottom: -1em; /* prevent font size from expanding parent container */
    margin-top: -1em;
}

body.experimental-dark-mode .icon-mtds-alert {
    background-color: var(--icon-mtds-tab-body-background-secondary-colour);
    color: var(--icon-mtds-tab-body-font-colour);
}

body.experimental-dark-mode .icon-mtds-alert > :first-child {
    color: inherit;
}
/* #endregion */

/* #region Default MTDS element styles (class applied to parent container) */
.icon-mtds-default-parent {
    color: var(--icon-mtds-global-font-colour);
    font-family: var(--icon-mtds-input-button-font-family);
}

.icon-mtds-default-parent p,
.icon-mtds-default-parent span:not(.k-icon):not(.field-validation-error):not(.k-badge),
.icon-mtds-default-parent label,
.icon-mtds-default-parent h2,
.icon-mtds-default-parent h3 {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    line-height: initial;
}

.icon-mtds-default-parent h2 {
    font-size: var(--icon-mtds-global-header-large-font-size);
    font-weight: var(--icon-mtds-global-header-large-font-weight);
}

.icon-mtds-default-parent h3 {
    font-size: var(--icon-mtds-global-header-medium-font-size);
    font-weight: var(--icon-mtds-global-header-medium-font-weight);
}

.icon-mtds-page-toolbar-container button[class^="ds-"],
.icon-mtds-default-parent button[class^="ds-"] {  /* Buttons containing icons */
    border: 0;
    padding: 0;
    background: none;
}



/* #endregion */