@import '../Core/_platformCommon.scss';
* {
    box-sizing: inherit;
}

a {
    color: inherit;
}

input,
select,
textarea,
button {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

html,
body {
    height: 100%;
    width: 100%;
}

body {
    box-sizing: border-box;
    display: flex;
    font-family: $fontFamily;
    font-size: $fontSizeM;
    padding: 0;
    margin: 0;
}

ul {
    padding: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: $fontWeightSemiBold;
}

/* 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;
}

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

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

/// 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;
}

/* 
 * 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;
}

/// 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;
}

/// 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;
}

/* 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 32px using top-margin
/// @group core|rhythm
.rhythm-vertical-32 {
    @include vertical-rhythm($spacing-32);
}

/* Font size 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 */

/// 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;
}

/* Typography styles */

/// Bold, 28px
/// @group core|typography
.title-l {
    line-height: 40px;
    font-size: $fontSizeLLL;
    letter-spacing: -0.04em;
    font-weight: $fontWeightHeavy;
}
/// Semibold, 21px
/// @group core|typography
.title-m {
    line-height: 32px;
    font-size: 21px;
    letter-spacing: -0.02em;
    font-weight: $fontWeightSemiBold;
}
/// Semibold, 17px
/// @group core|typography
.title-s {
    line-height: 24px;
    font-size: 17px;
    font-weight: $fontWeightSemiBold;
}
/// Semibold, 15px
/// @group core|typography
.title-xs {
    line-height: 20px;
    font-size: $fontSizeMM;
    font-weight: $fontWeightSemiBold;
}
/// 17px font, with 24px line height
/// @group core|typography
.body-xl {
    line-height: 24px;
    font-size: 17px;
}
/// 15px font, with 20x line height
/// @group core|typography
.body-l {
    line-height: 20px;
    font-size: $fontSizeMM;
}
/// 14px font, with 20px line height
/// @group core|typography
.body-m {
    line-height: 20px;
    font-size: $fontSizeM;
}
/// 12px font, with 16px line height
/// @group core|typography
.body-s {
    line-height: 16px;
    font-size: $fontSize;
}
/// Uses the secondary text color (theme-dependent)
/// @group core|typography
.secondary-text {
    color: $secondary-text;
}
/// Uses a monospaced font family (Menlo, Consolas, Courier New, monospace)
/// @group core|typography
.monospaced-text {
    font-family: $fontFamilyMonospace;
}

/* 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;
}

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

/// 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: 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;
}

/* 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 
    
    These 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.
*/

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

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

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

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

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

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

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

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

/* 
    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;
}

/*
    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;
}

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

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

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: $transblack-30;
    background-clip: padding-box;
}

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

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

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