// convert a 3-byte triplet into an rgb color
// e.g. rgbcolor("12, 34, 56") => rgb(12, 34, 56)
@function rgbcolor($triplet, $alpha: 1) {
    @return #{"rgba(" $triplet ", " $alpha ")"};
}

/// Communication shaded-30 (darkened)
/// @group colors|Communication
$communication-shade-30: rgbcolor(var(--palette-primary-shade-30));

/// Communication shaded-20 (darkened)
/// @group colors|Communication
$communication-shade-20: rgbcolor(var(--palette-primary-shade-20));

/// Communication shaded-10 (darkened)
/// @group colors|Communication
$communication-shade-10: rgbcolor(var(--palette-primary-shade-10));

/// Primary communication for foreground (text)
/// @group colors|Communication
$communication-foreground: var(--communication-foreground);

/// Primary communication for background
/// @group colors|Communication
$communication-background: var(--communication-background);

/// Communication tinted-10 (lightened)
/// @group colors|Communication
$communication-tint-10: rgbcolor(var(--palette-primary-tint-10));

/// Communication tinted-20 (lightened)
/// @group colors|Communication
$communication-tint-20: rgbcolor(var(--palette-primary-tint-20));

/// Communication tinted-30 (lightened)
/// @group colors|Communication
$communication-tint-30: rgbcolor(var(--palette-primary-tint-30));

/// Communication tinted-40 (lightened)
/// @group colors|Communication
$communication-tint-40: rgbcolor(var(--palette-primary-tint-40));

/// Communication background active color
/// @group colors|Communication
$communication-background-active: rgbcolor(var(--palette-primary-darkened-10));

/// Communication background hover color
/// @group colors|Communication
$communication-background-hover: rgbcolor(var(--palette-primary-darkened-6));

/// Neutral-100 (black)
/// @group colors|Neutrals
$black: rgbcolor(var(--palette-neutral-100));

/// Neutral-80
/// @group colors|Neutrals
$neutral-80: rgbcolor(var(--palette-neutral-80));

/// Neutral-70
/// @group colors|Neutrals
$neutral-70: rgbcolor(var(--palette-neutral-70));

/// Neutral-60
/// @group colors|Neutrals
$neutral-60: rgbcolor(var(--palette-neutral-60));

/// Neutral-30
/// @group colors|Neutrals
$neutral-30: rgbcolor(var(--palette-neutral-30));

/// Neutral-20
/// @group colors|Neutrals
$neutral-20: rgbcolor(var(--palette-neutral-20));

/// Neutral-10
/// @group colors|Neutrals
$neutral-10: rgbcolor(var(--palette-neutral-10));

/// Neutral-8
/// @group colors|Neutrals
$neutral-8: rgbcolor(var(--palette-neutral-8));

/// Neutral-6
/// @group colors|Neutrals
$neutral-6: rgbcolor(var(--palette-neutral-6));

/// Neutral-4
/// @group colors|Neutrals
$neutral-4: rgbcolor(var(--palette-neutral-4));

/// Neutral-2
/// @group colors|Neutrals
$neutral-2: rgbcolor(var(--palette-neutral-2));

/// Neutral-0 (white)
/// @group colors|Neutrals
$neutral-0: rgbcolor(var(--palette-neutral-0));
$white: rgbcolor(var(--palette-neutral-0));

/// 80% black
/// @group colors|Neutral-alphas
$neutral-alpha-80: var(--palette-black-alpha-80);

/// 70% black
/// @group colors|Neutral-alphas
$neutral-alpha-70: var(--palette-black-alpha-70);

/// 60% black
/// @group colors|Neutral-alphas
$neutral-alpha-60: var(--palette-black-alpha-60);

/// 30% black
/// @group colors|Neutral-alphas
$neutral-alpha-30: var(--palette-black-alpha-30);

/// 20% black
/// @group colors|Neutral-alphas
$neutral-alpha-20: var(--palette-black-alpha-20);

/// 10% black
/// @group colors|Neutral-alphas
$neutral-alpha-10: var(--palette-black-alpha-10);

/// 8% black
/// @group colors|Neutral-alphas
$neutral-alpha-8: var(--palette-black-alpha-8);

/// 6% black
/// @group colors|Neutral-alphas
$neutral-alpha-6: var(--palette-black-alpha-6);

/// 4% black
/// @group colors|Neutral-alphas
$neutral-alpha-4: var(--palette-black-alpha-4);

/// 2% black
/// @group colors|Neutral-alphas
$neutral-alpha-2: var(--palette-black-alpha-2);

// Back-compat support for old transblack names
$transblack-80: $neutral-alpha-80;
$transblack-70: $neutral-alpha-70;
$transblack-60: $neutral-alpha-60;
$transblack-30: $neutral-alpha-30;
$transblack-20: $neutral-alpha-20;
$transblack-10: $neutral-alpha-10;
$transblack-8: $neutral-alpha-8;
$transblack-6: $neutral-alpha-6;
$transblack-4: $neutral-alpha-4;
$transblack-2: $neutral-alpha-2;

/// Main background color
/// @group colors|Text-color
$backgroundColor: var(--background-color);

/// Main text (foreground) color
/// @group colors|Text-color
$primary-text: var(--text-primary-color);

/// Secondary text color
/// @group colors|Text-color
$secondary-text: var(--text-secondary-color);

/// Disabled text color
/// @group colors|Text-color
$disabled-text: var(--text-disabled-color);

/// Disabled text color inverse
/// @group colors|Text-color
$disabled-text-invert: rgbcolor(var(--palette-neutral-0), 0.38);

/// Text color to use on communication (colored) backgrounds.
/// This is always a light color independent of light/dark theme.
/// @group colors|Text-color
$text-on-communication-background: var(--text-on-communication-background);

$textColor: $primary-text;
$textMutedColor: $secondary-text;
$hint-text: $disabled-text;

$tooltip-background-color: rgbcolor(var(--palette-neutral-80), 0.95);

$subtleBorderColor: var(--border-subtle-color);
$splitterBorderColor: var(--splitter-border-color);

$focus-border-color: var(--focus-border-color);

$calloutShadowColor: var(--callout-shadow-color);
$calloutShadowSecondaryColor: var(--callout-shadow-secondary-color);
$calloutBackgroundColor: var(--callout-background-color);
$calloutFilteredBackgroundColor: var(--callout-filtered-background-color);

$panelShadowColor: var(--panel-shadow-color);
$panelShadowSecondaryColor: var(--panel-shadow-secondary-color);

$third-party-icon-filter: var(--third-party-icon-filter);

/// Info foreground color
/// @group colors|Status
$status-info-foreground: var(--status-info-foreground);

/// Info background color
/// @group colors|Status
$status-info-background: var(--status-info-background);

/// Error foreground color
/// @group colors|Status
$status-error-foreground: var(--status-error-foreground);

/// Error background color
/// @group colors|Status
$status-error-background: var(--status-error-background);

/// Error text color
/// @group colors|Status
$status-error-text: var(--status-error-text);

/// Success foreground color
/// @group colors|Status
$status-success-foreground: var(--status-success-foreground);

/// Success background color
/// @group colors|Status
$status-success-background: var(--status-success-background);

/// Success text color
/// @group colors|Status
$status-success-text: var(--status-success-text);

/// Warning foreground icon color
/// @group colors|Status
$status-warning-icon-foreground: var(--status-warning-icon-foreground);

/// Warning foreground color
/// @group colors|Status
$status-warning-foreground: var(--status-warning-foreground);

/// Warning background color
/// @group colors|Status
$status-warning-background: var(--status-warning-background);

/// Warning text color
/// @group colors|Status
$status-warning-text: var(--status-warning-text);

// Error and danger button colors
$error-text: var(--status-error-text);
$error-text-strong: var(--status-error-strong);
$danger-background: var(--palette-error);
$danger-background-hover: var(--palette-error-6);
$danger-background-active: var(--palette-error-10);
$danger-background-text: $text-on-communication-background;

/// Default (Segoe UI) font family
/// @group core|typography
$fontFamily: "Segoe UI", "-apple-system", BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Ubuntu, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";

/// Fixed-width (code) font family
/// @group core|typography
$fontFamilyMonospace: "Cascadia Mono", Menlo, Consolas, Courier New, monospace;

// Font sizes
$fontSizeXXS: 0.5625rem !default;
$fontSizeXS: 0.625rem !default;
$fontSizeS: 0.6875rem !default;
$fontSize: 0.75rem !default;
$fontSizeMS: 0.8125rem !default;
$fontSizeM: 0.875rem !default;
$fontSizeMM: 0.9375rem !default;
$fontSizeML: 1rem !default;
$fontSizeL: 1.125rem !default;
$fontSizeLL: 1.5rem !default;
$fontSizeLLL: 1.75rem !default;
$fontSizeXL: 2.25rem !default;
$fontSizeXXL: 2.5rem !default;
$fontSizeXXXL: 3.5rem !default;
$fontSizeXXXXL: 4.5rem !default;

/// Heavy (bold) font weight
/// @group core|typography
$fontWeightHeavy: bold !default;

/// Normal font weight
/// @group core|typography
$fontWeightNormal: normal !default;

/// Light (200) font weight
/// @group core|typography
$fontWeightLighter: 200 !default;

/// Semi-bold (600) font weight
/// @group core|typography
$fontWeightSemiBold: 600 !default;

/// 1px
/// @group core|spacing
$spacingBorder: 1px;

/// 3px
/// @group core|spacing
$spacingFocusRect: 3px;

/// spacing-XXS
/// @group core|spacing
$spacing-4: 4px;

/// spacing-XS
/// @group core|spacing
$spacing-8: 8px;

/// spacing-S
/// @group core|spacing
$spacing-12: 12px;

/// spacing-M
/// @group core|spacing
$spacing-16: 16px;

/// spacing-L
/// @group core|spacing
$spacing-20: 20px;

/// @group core|spacing
$spacing-24: 24px;

/// spacing-XL
/// @group core|spacing
$spacing-32: 32px;

/// spacing-XXL
/// @group core|spacing
$spacing-40: 40px;

$radius-medium: $spacing-4;

@mixin calloutStyles {
    box-shadow: 0 6.4px 14.4px 0 $calloutShadowColor, 0 1.2px 3.6px 0 $calloutShadowSecondaryColor;
    border-width: 0px;
    border-radius: $radius-medium;

    .ms-Callout-main {
        border-radius: $radius-medium;
        padding: $spacing-8 0;
        background: $calloutBackgroundColor;
    }
}

// All of these mixins have an implied "and below" attacked
// Notice: Do not use these to hide content on mobile. Use conditional rendering instead.
// (see ScreenSizeConditional component in vss-ui-core/Utilities)
@mixin xsmall-screen {
    @media screen and (max-width: 599px) {
        @content;
    }
}

@mixin small-screen {
    @media screen and (max-width: 1023px) {
        @content;
    }
}

@mixin medium-screen {
    @media screen and (max-width: 1365px) {
        @content;
    }
}

@mixin large-screen {
    @media screen and (max-width: 1919px) {
        @content;
    }
}

@mixin xlarge-screen {
    @media screen and (min-width: 1920px) {
        @content;
    }
}

@mixin touch-smooth-scrolling {
    // For now, enable touch scrolling only for small devices
    @include xsmall-screen {
        -webkit-overflow-scrolling: touch;
    }
}

@mixin theme-high-contrast {
    @at-root (with: all) {
        body.ms-vss-web-vsts-theme-hc-dark & {
            @content;
        }
        body.ms-vss-web-vsts-theme-hc-light & {
            @content;
        }
    }
}

@mixin theme-high-contrast-dark-only {
    @at-root (with: all) {
        body.ms-vss-web-vsts-theme-hc-dark & {
            @content;
        }
    }
}

@mixin theme-high-contrast-light-only {
    @at-root (with: all) {
        body.ms-vss-web-vsts-theme-hc-light & {
            @content;
        }
    }
}