@import './ui.colors.less';
// This file is for global application contexts-to-colors mapping
// component specific mappings to global contexts or to colors can be
// found in the associated component's less file.

// DEPRECATED: these hex values will be replaced with color vars from ui.colors.less
@appListGray: #E5E5E5;
@appActionBorder: #DADADA;
@appActionBackground: fade(@appActionBorder, 20%);
@appControlBorder: #C8C8C8;

// Please name Schedulicity Contexts starting with sc
// Please use context not colors in the names
// Please keep context names in alphabetical order
// DEPRECATION NOTICE: any hex values here will need to be replaced with color vars from ui.colors.less
@scAction: @Huckleberry_500;
@scActionHover: @Huckleberry_400;
@scActionPressed: @Huckleberry_700;
@scActionBackground:  @Huckleberry_000;
@scActionDark: @Huckleberry_600;
@scActionLight: @Huckleberry_200;
@scActionVeryLight: @Huckleberry_100;
@scActionUltraLight: @Huckleberry_000;
@scActionContrast: @White;
@scNotificationBackground: @General_400;

@scAppHeader: @Slate_700;

@scBook: #FF7A59;
@scBookDark: #F07050;

@scNegative: @Negative_400;
@scNegativePressed: @Negative_700;
@scNegativeLight: @Negative_200;
@scNegativeVeryLight: @Negative_100;
@scNegativeContrast: @White;

@scPositive: @Positive_400;
@scPositivePressed: @Positive_700;
@scPositiveLight: @Positive_200;
@scPositiveVeryLight: @Positive_100;
@scPositiveContrast: @White;

@scInactive: @Slate_200;

@scNeutralLight: @Slate_000;
@scNeutral: @Slate_200;

@scInfo: @General_400;
@scInfoPressed: @General_700;
@scInfoLight: @General_200;
@scInfoVeryLight: @General_100;
@scInfoContrast: @White;

@scGeneral: @General_400;
@scGeneralPressed: @General_700;
@scGeneralLight: @General_200;
@scGeneralVeryLight: @General_100;
@scGeneralContrast: @White;

@scSelect: @Huckleberry_500;

@scDarkGray: #393F48;
@scMedGray: @Sapphire_200;
@scLightGray: #CBD6E2;

@scBackground: @Slate_000;
@scCancelBorder: #CCD2DB;

@scTertiary: #E5EBF3;
@scTertiaryBorder: @Slate_200;
@scUnderlineHover: @Slate_500;

@scWarning: @Warning_400;
@scWarningBackground: @Warning_100;
@scWarningBorder: @Warning_400;
@scWarningLight: @Warning_200;
@scWarningVeryLight: @Warning_100;

// Text Size Variables
// Match the size in the design system type style and prepend it with st for Schedulicity Text

@body-1: 1rem;
@body-2: 0.875rem;
@caption: .75rem;

// Text Brightness Scale
@text-000: @Slate_000;
@text-100: @Slate_100;
@text-200: @Slate_200;
@text-300: @Slate_300;
@text-400: @Slate_400;
@text-500: @Slate_500;
@text-600: @Slate_600;
@text-700: @Slate_700;
@text-800: @Slate_800;
@text-900: @Slate_900;

@scText: @text-700;

@mobile: 480px;
@mobile-landscape: 640px;
@landscape: 768px;
@landscape-height: 480px; // or use @mobile, but break on height
@tablet: 1124px;

// app wide color palette
// DEPRECATED: to be replaced with colors from ui.colors.less
@appWhite: @White;
@appBlack: @Slate_700;
@appOrange: #f06c3e;
@appDarkOrange: #fc4b00;
@appYellow: #ffd42b;
@appDarkGray: @Slate_400;
@appBlueGray: #20303a;
@appGray: #949494;
@appSuperLightGray: @Slate_100;
@appLightGray: lighten(@appGray, 30%);
@appVeryLightGray: @scBackground;
@appMediumBlue: #c0e0e8;
@appLightBlue: #E1F1F5;
@appDarkBlue: #4682b4;
@appLightTeal: #e7f7f9;
@appRed: @scNegative;
@appPanelGray: #f8f8f8;

/*end palette*/

@hyperlink: @scAction;
@hyperlinkHover: @scActionHover;

@highlight: @scAction; //<----should NOT be the same color as hyperlink

@buttonRadius: 8px;
@buttonTertiaryBackgroundColor: @appGray;
@buttonDangerBackgroundColor: @appRed;
@buttonSelectedBackgroundColor: @scPositive;
@buttonDisabledBackgroundColor: @appDarkGray;
@appHeaderLinkColor: @scAction;

@tableborderColor: #c3d8db;

// Border Container
@apptColorBlue: @calAquaDark;
@apptColorPurple: @calPurpleDark;
@apptColorRed: @calRedDark;
@apptColorYellow: @calYellowDark;
@apptColorOrange: @calOrangeDark;
@apptColorGreen: @calGreenDark;
@apptColorGray: @calBlueDark;
// Main Container
@apptColorBlueContrast: @calAquaLight;
@apptColorPurpleContrast: @calPurpleLight;
@apptColorRedContrast: @calRedLight;
@apptColorYellowContrast: @calYellowLight;
@apptColorOrangeContrast: @calOrangeLight;
@apptColorGreenContrast: @calGreenLight;
@apptColorGrayContrast: @calBlueLight;
// Travel Time
@apptColorBlueTravel: @calAquaMedium;
@apptColorPurpleTravel: @calPurpleMedium;
@apptColorRedTravel: @calRedMedium;
@apptColorYellowTravel: @calYellowMedium;
@apptColorOrangeTravel: @calOrangeMedium;
@apptColorGreenTravel: @calGreenMedium;
@apptColorGrayTravel: @calBlueMedium;


@apptCellHighlightColor: #fbeaad;

@notifyBackgroundColor: #000000;
@notifyBorderColor: @scAction;
@overlayBackgroundColor: @appWhite;
@overlayBorderColor: @buttonTertiaryBackgroundColor;

// spacing : 1rem = 16px;
@spacing-xxs: 0.25rem;
@spacing-xs: 0.5rem;
@spacing-s: 0.75rem;
@spacing-m: 1rem;
@spacing-l: 1.25rem;
@spacing-xl: 1.5rem;
@spacing-xxl: 1.75rem;

// functions
.calc(@property; @value) {
    @{property}: -webkit-calc(@value);
    @{property}: -moz-calc(@value);
    @{property}: calc(@value);
}

.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

.transform(@transform) {
  -webkit-transform: @transform;
     -moz-transform: @transform;
       -o-transform: @transform;
          transform: @transform;
}

.text-overflow(@overflow) {
  -webkit-text-overflow: @overflow;
     -moz-text-overflow: @overflow;
      -ms-text-overflow: @overflow;
       -o-text-overflow: @overflow;
          text-overflow: @overflow;
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
      -ms-border-radius: @radius;
       -o-border-radius: @radius;
          border-radius: @radius;
}

@titleBarHeight:70px;