@import '../Core/_platformCommon.scss';
/**
 * User-agent style overrides required for the components to function correctly.
 */

* {
    box-sizing: inherit;
}

body {
    box-sizing: border-box;
}

/* Layout styles */

/// Makes an element absolutely positioned and fill the entire space.
/// @group core|layout
.absolute-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
}

/// position: absolute
/// @group core|layout
.absolute {
    position: absolute;
}

/// position: relative
/// @group core|layout
.relative {
    position: relative;
}

/// pointer-events: none
/// @group core|layout
.no-events {
    pointer-events: none;
}

/// overflow: hidden
/// @group core|overflow
.scroll-hidden {
    overflow: hidden;
}

/// overflow-y: hidden
/// @group core|overflow
.v-scroll-hidden {
    overflow-y: hidden;
}

/// overflow-x: hidden
/// @group core|overflow
.h-scroll-hidden {
    overflow-x: hidden;
}

/// overflow: auto
/// @group core|overflow
.scroll-auto {
    overflow: auto;
    @include touch-smooth-scrolling;
}

/// overflow-y: auto
/// @group core|overflow
.v-scroll-auto {
    overflow-y: auto;
    @include touch-smooth-scrolling;
}

/// overflow-x: auto
/// @group core|overflow
.h-scroll-auto {
    overflow-x: auto;
    @include touch-smooth-scrolling;
}

/// height: 100%
/// @group core|overflow
.full-height {
    height: 100%;
}

/// Makes an element a row-based flex-box, flex-grow: 1, and overflow: hidden.
/// @group core|overflow
.full-size {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
}

/// width: 100%
/// @group core|overflow
.full-width {
    width: 100%;
}

/*
 * Flex styles - applied to the flexbox (flex container).
 */

/// display: flex and flex-direction: column
/// @group core|flex-box
.flex-column {
    display: flex;
    flex-direction: column;
}

/// display: flex and flex-direction: row
/// @group core|flex-box
.flex-row {
    display: flex;
    flex-direction: row;
}

// Switch to flex-direction: column on xsmall screens
.flex-column\@xsmall {
    @include xsmall-screen {
        display: flex;
        flex-direction: column;
    }
}

// Switch to flex-direction: column on small screens
.flex-column\@small {
    @include small-screen {
        display: flex;
        flex-direction: column;
    }
}

// Switch to flex-direction: column on medium screens
.flex-column\@medium {
    @include medium-screen {
        display: flex;
        flex-direction: column;
    }
}

// Switch to flex-direction: row on xsmall screens
.flex-row\@xsmall {
    @include xsmall-screen {
        display: flex;
        flex-direction: row;
    }
}

// Switch to flex-direction: row on small screens
.flex-row\@small {
    @include small-screen {
        display: flex;
        flex-direction: row;
    }
}

// Switch to flex-direction: row on medium screens
.flex-row\@medium {
    @include medium-screen {
        display: flex;
        flex-direction: row;
    }
}

/// display: inline-flex and flex-direction: column
/// @group core|flex-box
.inline-flex-column {
    display: inline-flex;
    flex-direction: column;
}

/// display: inline-flex and flex-direction: row
/// @group core|flex-box
.inline-flex-row {
    display: inline-flex;
    flex-direction: row;
}

/// align-items: center
/// @group core|flex-box
.flex-center {
    align-items: center;
}

/// align-items: flex-end
/// @group core|flex-box
.flex-end {
    align-items: flex-end;
}

/// align-items: flex-start
/// @group core|flex-box
.flex-start {
    align-items: flex-start;
}

/// align-items: stretch
/// @group core|flex-box
.flex-stretch {
    align-items: stretch;
}

/// align-items: baseline
/// @group core|flex-box
.flex-baseline {
    align-items: baseline;
}

/// justify-content: flex-start
/// @group core|flex-box
.justify-start {
    justify-content: flex-start;
}

/// justify-content: center
/// @group core|flex-box
.justify-center {
    justify-content: center;
}

/// justify-content: flex-end
/// @group core|flex-box
.justify-end {
    justify-content: flex-end;
}

/// justify-content: space-between
/// @group core|flex-box
.justify-space-between {
    justify-content: space-between;
}

/// flex-wrap: wrap
/// @group core|flex-box
.flex-wrap {
    flex-wrap: wrap;
}

/*
 * Flex styles - appled to the flex-items (flexbox children).
 */

/// flex-grow: 1
/// @group core|flex-item
.flex-grow {
    flex-grow: 1;
}

/// flex-shrink: 0
/// @group core|flex-item
.flex-noshrink {
    flex-shrink: 0;
}

/// align-self: center
/// @group core|flex-item
.flex-self-center {
    align-self: center;
}

/// align-self: flex-end
/// @group core|flex-item
.flex-self-end {
    align-self: flex-end;
}

/// align-self: flex-start
/// @group core|flex-item
.flex-self-start {
    align-self: flex-start;
}

/// align-self: stretch
/// @group core|flex-item
.flex-self-stretch {
    align-self: stretch;
}

/*
 * FlexBox semantic styles.
 */

/// Makes an element a row-based flex box, with items aligned center and no margin/padding.
/// @group core|flex-box
.flex-cell {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Typography styles */

/// Bold, 28px
/// @group core|typography
.title-l {
    font-size: 1.75rem;
    font-weight: $fontWeightHeavy;
    letter-spacing: -0.04em;
}

/// Semibold, 21px
/// @group core|typography
.title-m {
    font-size: 1.3125rem;
    font-weight: $fontWeightSemiBold;
    letter-spacing: -0.02em;
}

/// Semibold, 17px
/// @group core|typography
.title-s {
    font-size: 1.0625rem;
    font-weight: $fontWeightSemiBold;
}

/// Semibold, 15px
/// @group core|typography
.title-xs {
    font-size: 0.9375rem;
    font-weight: $fontWeightSemiBold;
}

/// 17px font, with 24px line height
/// @group core|typography
.body-xl {
    font-size: 1.0625rem;
}

/// 15px font, with 20x line height
/// @group core|typography
.body-l {
    font-size: 0.9375rem;
}

/// 14px font, with 20px line height
/// @group core|typography
.body-m {
    font-size: 0.875rem;
}

/// 12px font, with 16px line height
/// @group core|typography
.body-s {
    font-size: 0.75rem;
}

/// 10px font, with 16px line height
/// @group core|typography
.body-xs {
    font-size: 0.6875rem;
}

/// 13px monospaced font with 20px line height
/// @group core|typography
.monospaced-m {
    font-family: $fontFamilyMonospace;
    font-size: 0.8125rem;
}

/// 12px monospaced font with 20px line height
/// @group core|typography
.monospaced-s {
    font-family: $fontFamilyMonospace;
    font-size: 0.75rem;
}

/// 12px monospaced font with 16px line height
/// @group core|typography
.monospaced-xs {
    font-family: $fontFamilyMonospace;
    font-size: 0.6875rem;
}

/* Font size styles - these can be used to override typography styles */

/// font-size: 9px
/// @group core|font-size
.font-size-xxs {
    font-size: $fontSizeXXS;
}

/// font-size: 10px
/// @group core|font-size
.font-size-xs {
    font-size: $fontSizeXS;
}

/// font-size: 11px
/// @group core|font-size
.font-size-s {
    font-size: $fontSizeS;
}

/// font-size: 12px
/// @group core|font-size
.font-size {
    font-size: $fontSize;
}

/// font-size: 13px
/// @group core|font-size
.font-size-ms {
    font-size: $fontSizeMS;
}

/// font-size: 14px
/// @group core|font-size
.font-size-m {
    font-size: $fontSizeM;
}

/// font-size: 15px
/// @group core|font-size
.font-size-mm {
    font-size: $fontSizeMM;
}

/// font-size: 16px
/// @group core|font-size
.font-size-ml {
    font-size: $fontSizeML;
}

/// font-size: 18px
/// @group core|font-size
.font-size-l {
    font-size: $fontSizeL;
}

/// font-size: 24px
/// @group core|font-size
.font-size-ll {
    font-size: $fontSizeLL;
}

/// font-size: 28px
/// @group core|font-size
.font-size-lll {
    font-size: $fontSizeLLL;
}

/// font-size: 36px
/// @group core|font-size
.font-size-xl {
    font-size: $fontSizeXL;
}

/// font-size: 40px
/// @group core|font-size
.font-size-xxl {
    font-size: $fontSizeXXL;
}

/// font-size: 56px
/// @group core|font-size
.font-size-xxxl {
    font-size: $fontSizeXXXL;
}

/// font-size: 72px
/// @group core|font-size
.font-size-xxxxl {
    font-size: $fontSizeXXXXL;
}

/* Font weight styles - these can be used to override typography styles */

/// font-weight: 200
/// @group core|font-weight
.font-weight-light {
    font-weight: $fontWeightLighter;
}

/// font-weight: normal
/// @group core|font-weight
.font-weight-normal {
    font-weight: $fontWeightNormal;
}

/// font-weight: 600
/// @group core|font-weight
.font-weight-semibold {
    font-weight: $fontWeightSemiBold;
}

/// font-weight: bold
/// @group core|font-weight
.font-weight-heavy {
    font-weight: $fontWeightHeavy;
}

/// Uses the secondary text color (theme-dependent)
/// @group core|typography
.secondary-text {
    color: $secondary-text;

    @media (forced-colors: active) {
        color: graytext;
    }
}

/// Uses a monospaced font family (Menlo, Consolas, Courier New, monospace)
/// @group core|typography
.monospaced-text {
    font-family: $fontFamilyMonospace;
}

/// Uses the error text color
/// @group core|typography
.error-text {
    color: $error-text;
}

.error-text-important {
    color: $error-text !important;
}

/* Theme-related styles */
.themed {
    background-color: $backgroundColor;
    color: $textColor;
}

/// vertical-align: middle
/// @group core|alignment
.v-align-middle {
    vertical-align: middle;
}

/* Depth styles */

/// No box-shadow
/// @group core|depth
.depth-0 {
    box-shadow: 0 0 0 0 transparent;
}

/// 4px box-shadow
/// @group core|depth
.depth-4 {
    box-shadow: 0 1.6px 3.6px 0 $calloutShadowColor, 0 0.3px 0.9px 0 $calloutShadowSecondaryColor;

    // TODO: Refactor to generic high contrast check
    @include theme-high-contrast {
        box-shadow: none;
        border: 1px solid $calloutShadowColor;
    }
}

/// 8px box-shadow
/// @group core|depth
.depth-8 {
    box-shadow: 0 3.2px 7.2px 0 $calloutShadowColor, 0 0.6px 1.8px 0 $calloutShadowSecondaryColor;

    // TODO: Refactor to generic high contrast check
    @include theme-high-contrast {
        box-shadow: none;
        border: 2px solid $calloutShadowColor;
    }
}

/// 16px box-shadow
/// @group core|depth
.depth-16 {
    box-shadow: 0 6.4px 14.4px 0 $calloutShadowColor, 0 1.2px 3.6px 0 $calloutShadowSecondaryColor;
}

/// 64px box-shadow
/// @group core|depth
.depth-64 {
    box-shadow: 0 25.6px 57.6px 0 $calloutShadowColor, 0 4.8px 14.4px 0 $calloutShadowSecondaryColor;
}

/* Sub layer styles */

/// Indicates another layer should be used (z-index: 10)
/// @group core|layer
.sub-layer {
    z-index: 10;
}

/* General cursor styles */

/// cursor: default
/// @group core|cursor
.cursor-default {
    cursor: default;
}

/// cursor: pointer
/// @group core|cursor
.cursor-pointer {
    cursor: pointer;
}

/* General text styles */

/// Apply to an element to make its text ellipsis (a parent must have overflow hidden)
/// @group core|text
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/// text-align: left
/// @group core|text
.text-left {
    text-align: left;
}

/// text-align: center
/// @group core|text
.text-center {
    text-align: center;
}

/// text-align: right
/// @group core|text
.text-right {
    text-align: right;
}

/// white-space: nowrap;
/// @group core|text
.white-space-nowrap {
    white-space: nowrap;
}

/// Ensure text wraps even when there are no appropriate break characters.
/// @group core|text
.word-break {
    // @NOTE: List break-all first since IE wont understand break-word and will use break-all.
    //      Modern browsers will apply break-word which uses improved word breaking over break-all.
    word-break: break-all;
    word-break: break-word;
}

/// Apply to an element t make the text within it selectable.
/// @group core|text
.selectable-text {
    user-select: text;
    cursor: text;
}

/* General link styles */

/// 2px padding used for icons within a link.
/// @group core|link
.link-icon {
    padding: 2px 2px;
}

/// 2px vertical padding used for text within a link.
/// @group core|link
.link-text {
    padding: 0 2px;
}

.no-outline {
    outline: none;
}

/* General icon styles */

/// 6px margin-right, separates icon and text
/// @group core|icon
.icon-margin {
    margin-right: 6px;
}

/// 12px margin-right, separates icon and text
/// @group core|icon
.icon-large-margin {
    margin-right: 12px;
}

.contributed-icon-image {
    background-size: contain;

    &.non-themed {
        filter: $third-party-icon-filter;
    }
}

/*
    Padding / Margin styles

    The no/-0 styles have !important because they are intended to remove padding / Margin.
    They shouldn't be added as the default case, only when trying to reset the padding / Margin
    that a different selector with a single level of selectivity has added.
*/

/// Adds 4px of negative margin and 4 px of (positive) padding to offset it.
/// This results in no visual padding, but allows shadows (e.g. from focus rects, Cards)
/// to display outside of their boundary.
/// @group core|padding
.shadow-padding {
    margin: -4px;
    padding: 4px;
}

/// Removes all margin from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|margin
.margin-0,
.no-margin {
    margin: 0px !important;
}

/// Adds 4px of margin to all sides of the element
/// @group core|margin
.margin-4 {
    margin: $spacing-4;
}

/// Adds 8px of margin to all sides of the element
/// @group core|margin
.margin-8 {
    margin: $spacing-8;
}

/// Adds 16px of margin to all sides of the element
/// @group core|margin
.margin-16 {
    margin: $spacing-16;
}

/// Adds 4px of margin to the bottom leaving the other sides unaffected
/// @group core|margin
.margin-bottom-4 {
    margin-bottom: $spacing-4;
}

/// Adds 8px of margin to the bottom leaving the other sides unaffected
/// @group core|margin
.margin-bottom-8 {
    margin-bottom: $spacing-8;
}

/// Adds 16px of margin to the bottom leaving the other sides unaffected
/// @group core|margin
.margin-bottom-16 {
    margin-bottom: $spacing-16;
}

/// Removes all horizontal margin from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|margin
.margin-horizontal-0,
.no-h-margin {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

/// Adds 4px of margin to the left and right leaving the other sides unaffected
/// @group core|margin
.margin-horizontal-4 {
    margin-left: $spacing-4;
    margin-right: $spacing-4;
}

/// Adds 8px of margin to the left and right leaving the other sides unaffected
/// @group core|margin
.margin-horizontal-8 {
    margin-left: $spacing-8;
    margin-right: $spacing-8;
}

/// Adds 16px of margin to the left and right leaving the other sides unaffected
/// @group core|margin
.margin-horizontal-16 {
    margin-left: $spacing-16;
    margin-right: $spacing-16;
}

/// Adds 20px of margin to the left and right leaving the other sides unaffected
/// @group core|margin
.margin-horizontal-20 {
    margin-left: $spacing-20;
    margin-right: $spacing-20;
}

/// Adds 4px of margin to the left leaving the other sides unaffected
/// @group core|margin
.margin-left-4 {
    margin-left: $spacing-4;
}

/// Adds 8px of margin to the left leaving the other sides unaffected
/// @group core|margin
.margin-left-8 {
    margin-left: $spacing-8;
}

/// Adds 16px of margin to the left leaving the other sides unaffected
/// @group core|margin
.margin-left-16 {
    margin-left: $spacing-16;
}

/// Adds 4px of margin to the right leaving the other sides unaffected
/// @group core|margin
.margin-right-4 {
    margin-right: $spacing-4;
}

/// Adds 8px of margin to the right leaving the other sides unaffected
/// @group core|margin
.margin-right-8 {
    margin-right: $spacing-8;
}

/// Adds 16px of margin to the right leaving the other sides unaffected
/// @group core|margin
.margin-right-16 {
    margin-right: $spacing-16;
}

/// Adds 4px of margin to the top leaving the other sides unaffected
/// @group core|margin
.margin-top-4 {
    margin-top: $spacing-4;
}

/// Adds 8px of margin to the top leaving the other sides unaffected
/// @group core|margin
.margin-top-8 {
    margin-top: $spacing-8;
}

/// Adds 16px of margin to the top leaving the other sides unaffected
/// @group core|margin
.margin-top-16 {
    margin-top: $spacing-16;
}

/// Removes all vertical margin from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|margin
.margin-vertical-0,
.no-v-margin {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

/// Adds 4px of margin to the top and bottom leaving the other sides unaffected
/// @group core|margin
.margin-vertical-4 {
    margin-bottom: $spacing-4;
    margin-top: $spacing-4;
}

/// Adds 8px of margin to the top and bottom leaving the other sides unaffected
/// @group core|margin
.margin-vertical-8 {
    margin-bottom: $spacing-8;
    margin-top: $spacing-8;
}

/// Adds 16px of margin to the top and bottom leaving the other sides unaffected
/// @group core|margin
.margin-vertical-16 {
    margin-bottom: $spacing-16;
    margin-top: $spacing-16;
}

/// Adds 20px of margin to the top and bottom leaving the other sides unaffected
/// @group core|margin
.margin-vertical-20 {
    margin-bottom: $spacing-20;
    margin-top: $spacing-20;
}

/// Removes all padding from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|padding
.padding-0,
.no-padding {
    padding: 0px !important;
}

/// Adds 4px of padding to all sides of the element
/// @group core|padding
.padding-4 {
    padding: $spacing-4;
}

/// Adds 8px of padding to all sides of the element
/// @group core|padding
.padding-8 {
    padding: $spacing-8;
}

/// Adds 16px of padding to all sides of the element
/// @group core|padding
.padding-16 {
    padding: $spacing-16;
}

/// Removes bottom padding from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|padding
.padding-bottom-0,
.no-bottom-padding {
    padding-bottom: 0px !important;
}

/// Adds 4px of padding to the bottom leaving the other sides unaffected
/// @group core|padding
.padding-bottom-4 {
    padding-bottom: $spacing-4;
}

/// Adds 8px of padding to the bottom leaving the other sides unaffected
/// @group core|padding
.padding-bottom-8 {
    padding-bottom: $spacing-8;
}

/// Adds 16px of padding to the bottom leaving the other sides unaffected
/// @group core|padding
.padding-bottom-16 {
    padding-bottom: $spacing-16;
}

/// Removes all horizontal padding from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|padding
.padding-horizontal-0,
.no-h-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

/// Adds 4px of padding to the left and right leaving the other sides unaffected
/// @group core|padding
.padding-horizontal-4 {
    padding-left: $spacing-4;
    padding-right: $spacing-4;
}

/// Adds 8px of padding to the left and right leaving the other sides unaffected
/// @group core|padding
.padding-horizontal-8 {
    padding-left: $spacing-8;
    padding-right: $spacing-8;
}

/// Adds 16px of padding to the left and right leaving the other sides unaffected
/// @group core|padding
.padding-horizontal-16 {
    padding-left: $spacing-16;
    padding-right: $spacing-16;
}

/// Adds 20px of padding to the left and right leaving the other sides unaffected
/// @group core|padding
.padding-horizontal-20 {
    padding-left: $spacing-20;
    padding-right: $spacing-20;
}

/// Adds 4px of padding to the left leaving the other sides unaffected
/// @group core|padding
.padding-left-4 {
    padding-left: $spacing-4;
}

/// Adds 8px of padding to the left leaving the other sides unaffected
/// @group core|padding
.padding-left-8 {
    padding-left: $spacing-8;
}

/// Adds 16px of padding to the left leaving the other sides unaffected
/// @group core|padding
.padding-left-16 {
    padding-left: $spacing-16;
}

/// Adds 4px of padding to the right leaving the other sides unaffected
/// @group core|padding
.padding-right-4 {
    padding-right: $spacing-4;
}

/// Adds 8px of padding to the right leaving the other sides unaffected
/// @group core|padding
.padding-right-8 {
    padding-right: $spacing-8;
}

/// Adds 16px of padding to the right leaving the other sides unaffected
/// @group core|padding
.padding-right-16 {
    padding-right: $spacing-16;
}

/// Removes top padding from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|padding
.padding-top-0,
.no-top-padding {
    padding-top: 0px !important;
}

/// Adds 4px of padding to the top leaving the other sides unaffected
/// @group core|padding
.padding-top-4 {
    padding-top: $spacing-4;
}

/// Adds 8px of padding to the top leaving the other sides unaffected
/// @group core|padding
.padding-top-8 {
    padding-top: $spacing-8;
}

/// Adds 16px of padding to the top leaving the other sides unaffected
/// @group core|padding
.padding-top-16 {
    padding-top: $spacing-16;
}

/// Removes all vertical padding from an element.
/// Not intended to be used as the default, only to override defaults
/// @group core|padding
.padding-vertical-0,
.no-v-padding {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
}

/// Adds 4px of padding to the top and bottom leaving the other sides unaffected
/// @group core|padding
.padding-vertical-4 {
    padding-bottom: $spacing-4;
    padding-top: $spacing-4;
}

/// Adds 8px of padding to the top and bottom leaving the other sides unaffected
/// @group core|padding
.padding-vertical-8 {
    padding-bottom: $spacing-8;
    padding-top: $spacing-8;
}

/// Adds 16px of padding to the top and bottom leaving the other sides unaffected
/// @group core|padding
.padding-vertical-16 {
    padding-bottom: $spacing-16;
    padding-top: $spacing-16;
}

/// Adds 20px of padding to the top and bottom leaving the other sides unaffected
/// @group core|padding
.padding-vertical-20 {
    padding-bottom: $spacing-20;
    padding-top: $spacing-20;
}

/* Rhythm styles */

@mixin horizontal-rhythm($spacing) {
    > :not(:first-child) {
        margin-left: $spacing;
    }
}

/// Spaces children by 4px using left-margin
/// @group core|rhythm
.rhythm-horizontal-4 {
    @include horizontal-rhythm($spacing-4);
}

/// Spaces children by 8px using left-margin
/// @group core|rhythm
.rhythm-horizontal-8 {
    @include horizontal-rhythm($spacing-8);
}

/// Spaces children by 16px using left-margin
/// @group core|rhythm
.rhythm-horizontal-16 {
    @include horizontal-rhythm($spacing-16);
}

@mixin vertical-rhythm($spacing) {
    > :not(:first-child) {
        margin-top: $spacing;
    }
}

/// Spaces children by 4px using top-margin
/// @group core|rhythm
.rhythm-vertical-4 {
    @include vertical-rhythm($spacing-4);
}

/// Spaces children by 8px using top-margin
/// @group core|rhythm
.rhythm-vertical-8 {
    @include vertical-rhythm($spacing-8);
}

/// Spaces children by 16px using top-margin
/// @group core|rhythm
.rhythm-vertical-16 {
    @include vertical-rhythm($spacing-16);
}

/// Spaces children by 20px using top-margin
/// @group core|rhythm
.rhythm-vertical-20 {
    @include vertical-rhythm($spacing-20);
}

/// Spaces children by 24px using top-margin
/// @group core|rhythm
.rhythm-vertical-24 {
    @include vertical-rhythm($spacing-24);
}

/// Spaces children by 32px using top-margin
/// @group core|rhythm
.rhythm-vertical-32 {
    @include vertical-rhythm($spacing-32);
}

/*
    Visibility styles
    NOTE - leave at the end of the file so they will override the general layout styles above.
*/
.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/// display: none
/// @group core|visibility
.hidden {
    display: none;
}

/// visibility: hidden
/// @group core|visibility
.invisible {
    visibility: hidden;
}

/// rotate 180 degrees
/// @group core|visibility
.rotate-180 {
    transform: rotate(180deg);
}

/// separator line above the element
/// @group core|border
.separator-line-top {
    border-top: 1px solid $neutral-8;
}

/// separator line below the element
/// @group core|border
.separator-line-bottom {
    border-bottom: 1px solid $neutral-8;
}

/// subtle border around the element
/// @group core|border
.subtle-border {
    border: 1px solid $neutral-8;
}

/// text-color for clickable suggestion
.suggestion-text {
    color: rgbcolor(var(--palette-accent3));

    .text-underlined {
        text-decoration: underline;
    }
}

/*
    Custom styles for shimmer effects on elements.
*/

/// Sets up a basic animation intended to mock the data shape being
/// loaded with a small shimmer effect.
/// @group core|shimmer
.shimmer {
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
    animation-iteration-count: infinite;
    background: linear-gradient(to right, $neutral-4 0%, $neutral-8 50%, $neutral-4 100%) 0px 0px / 90% 100% no-repeat $neutral-4;
    transition: opacity 200ms ease 0s;
}

/// The wide animation should be used on elements wider than 200px.
/// @group core|shimmer
@keyframes shimmer-wide {
    0% {
        background-position: -500px;
    }

    100% {
        background-position: 500px;
    }
}

/// The thin animation should be used on elements thinner than 200px.
/// @group core|shimmer
@keyframes shimmer-thin {
    0% {
        background-position: -200px;
    }

    100% {
        background-position: 200px;
    }
}

/// This shimmer-line style will use a wide animation and provide proportional corners to look like a line.
/// @group core|shimmer
.shimmer-line {
    animation-name: shimmer-wide;
    border-radius: 0.5em;
}

/// This shimmer-circle-small style will use a circular element with a thin animation, this is used for small prefixes.
/// @group core|shimmer
.shimmer-circle-small {
    animation-name: shimmer-thin;
    border-radius: 50%;
    height: 1.3em;
    margin-right: 4px;
    width: 1.3em;
}

/// This shimmer-circle-large style will use a circular element with a thin animation, this is used for large prefixes.
/// @group core|shimmer
.shimmer-circle-large {
    animation-name: shimmer-thin;
    border-radius: 50%;
    height: 2.3em;
    margin-right: 4px;
    width: 2.3em;
}

/*
    Custom scrollbar support (only on Chrome)
*/

/// Overrides the default scrollbar with a custom one.
/// Only works in browsers supporting webkit-scrollbar or scrollbar-color/width.
/// @group core|scrollbar
.custom-scrollbar {
    // Custom scrollbar styles for Firefox
    scrollbar-color: $transblack-20 transparent;
    scrollbar-width: thin;

    &.scroll-auto-hide {
        scrollbar-color: transparent transparent;

        &:hover {
            scrollbar-color: $transblack-20 transparent;
        }
    }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 18px;
    height: 18px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    border: 6px solid transparent;
    background: $transblack-20;
    border-radius: 10px;
    background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb:vertical {
    min-height: 30px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:horizontal {
    min-width: 30px;
}

.custom-scrollbar.scroll-auto-hide::-webkit-scrollbar-thumb {
    background: transparent;
    background-clip: padding-box;
}

.custom-scrollbar.scroll-auto-hide:hover::-webkit-scrollbar-thumb {
    background: $transblack-20;
    background-clip: padding-box;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: $transblack-30;
    background-clip: padding-box;
    border: 4px solid transparent;
}

.custom-scrollbar-hidden {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.custom-scrollbar-hidden::-webkit-scrollbar {
    width: 0;
}

.grayscale {
    filter: grayscale(100%); // Not supported in IE11
}

.screen-reader-only {
    user-select: none;
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    -webkit-clip-path: inset(50%);
    overflow: hidden !important;
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 !important;
}