/* BASIC COLORS */

@value color1: #8fffd7;

/* ligntMintGreen */
@value color2: #5cd9a6;

/* darkMintGreen */
@value color3: #1a2f58;

/* darkBlue */
@value color4: rgb(54, 54, 46);

/* BrownBlack */
@value color5: #222222;

/* AlmostBlack */
@value color6: #a2a2a2;

/* LightGrey (for subtitles) */
@value color7: #e8e8e8;

/* LightGrey (for onhover) */
@value color8: rgba(55, 53, 47, 0.2);

/* Darkergrey (for non-white onhover) */

/* TODO: This is not LightGrey, it's the same lightMintGreen as color1 ??? */
@value color9: #8fffd7;

/* LightGrey (for borders) */
@value color10: #83c9f4;

/* lightBlue */
@value color11: #f7f7f7;

/* lightgrey for edit fields */
@value color12: #f29d9d;

/* mint-red for warning colors */
@value color13: #edf0f4;

/* light blue for fixed sidebars */
@value color14: #efefef;

/* light grey for selecting options */
@value color15: #dfdfdf;

/* loadingindicator */
@value color16: #555555;

/* mid grey */
@value color17: #667bcc;

/* light purple */
@value grey9: #3a2f45;

/* gray-9 , part of the new colour consts. Using here until we can use styled components everywhere */

/* BORDER RADIUS */
@value radius1: 1px;
@value radius2: 2px;
@value radius3: 3px;
@value radius4: 4px;
@value radius5: 5px;
@value radius6: 6px;

/* FONTS */

@value mainFont: 'Inter'

/* CONFIGURATIONS */

.onHoverLight:hover {
    background-color: color7;
}

.onHoverDark:hover {
    background-color: color8;
}

.sideBarColorOpen {
    background-color: color13;
}

.header1 {
    color: color5;
    font-size: 25px;
}

.header2 {
    color: color5;
    font-size: 21px;
}

.header3 {
    color: color5;
    font-size: 18px;
}

.header4 {
    color: color5;
    font-size: 16px;
}

.subText {
    color: color6;
}

/* BELOW: LEGACY TO ORGANISE BETTER */

.titleColor {
    color: color5;
}

.h2Color {
    color: color4;
}

.h2ColorBackground {
    background-color: color4;
}

.backgroundWarningColor {
    background-color: #f29d9d;
}

.lightMintGreen {
    color: color1;
}

.darkMintGreen {
    color: color2;
}

.warningColor {
    color: color12;
}

.lightBlueBackground {
    background-color: color10;
}

/* BACKGROUND COLORS */

.backgroundLightMintGreen {
    background-color: color1;
}

.backgroundMintGreen {
    background-color: color2;
}

.darkBlue {
    color: color3;
}

.darkGreyBackground {
    background-color: color9;
}

.darkGrey {
    color: color9;
}

.darkBlueBackground {
    background-color: color3;
}

.textColorSearchPlaceholder {
    composes: darkBlue;
    opacity: 1;

    &:placeholder-shown {
        font-family: 'Satoshi', sans-serif;
        font-feature-settings: 'pnum' on, 'lnum' on, 'case' on, 'ss03' on,
            'ss04' on, 'liga' off;
        color: color3;
    }

    &:placeholder {
        font-family: 'Satoshi', sans-serif;
        font-feature-settings: 'pnum' on, 'lnum' on, 'case' on, 'ss03' on,
            'ss04' on, 'liga' off;
        color: color3;
    }
}

.actionHover {
    background-color: color7;
}

.subTitleColor {
    color: color6;
    font-weight: 300;
}

.editFields {
    background-color: color11;
}

.menuItem {
    color: color5;
    font-weight: 400;
}

/* BORDER RADIUS */

.nakedButton {
    padding: 3px 8px 3px 8px;
    border-radius: radius3;
    font-weight: 500;
}

.buttonRadius {
    border-radius: radius5;
}

.buttonRadiusSmall {
    border-radius: radius3;
}

.radius5 {
    border-radius: 5px;
}

/* HOVER STATES */

.selectedColor {
    background-color: color11;
}

.hoverColor:hover {
    background-color: color7;
    color: color4;
}

.itemActive {
    color: color4;
    font-weight: 600;
}

.hoverSidebarActive {
    background-color: color8;
}

/* BOX SHADOW FOR TOOLTIPS */

.boxShadow {
    border-radius: radius3;
    box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px,
        rgba(15, 15, 15, 0.1) 0px 2px 4px;
    transition: background 120ms ease-in 0s;

    &:hover {
        transition: background 120ms ease-in 0s;
        background-color: rgba(55, 53, 47, 0.03);
    }
}

.boxShadowOverlays {
    box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px,
        rgba(15, 15, 15, 0.1) 0px 5px 10px, rgba(15, 15, 15, 0.2) 0px 15px 40px;
}

.infoBoxes {
    border-radius: radius3;
    box-shadow: 0px 53px 100px -50px #b7b7b7;
    border: solid 1px #f4f4f4;
    background: white;
}

/* CALL TO ACTION BUTTONS */

.CTAwarning {
    composes: backgroundWarningColor;
    border-radius: 3px;
    color: color4;
    cursor: pointer;
    background: color12;

    &:hover {
        color: black;
        opacity: 1;
    }
}

.CTA {
    composes: backgroundLightMintGreen h2Color;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;

    &:hover {
        background-color: #5cd9a6;
    }
}

.CTAdarkBlue {
    composes: darkBlueBackground;
    composes: buttonRadius;
    color: white;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.7;

    &:hover {
        opacity: 1;
    }
}
