color:
    grey:
        0: "#f5f5f5"
        1: "#eeeeee"
        2: "#dddddd"
        3: "#bbbbbb"
        4: "#9c9c9c"
        5: "#848484"
        6: "#666666"
        7: "#535353"
        8: "#414042"
        9: "#333333"
    red:
        1: "#fbd2d3"
        2: "#f98680"
        3: "#ec1c24"
        4: "#b2151b"
    yellow:
        1: "#fbf4c3"
        2: "#ffee73"
        3: "#ffd300"
        4: "#fcbc06"
        5: "#cc9817"
        6: "#9d6e0f"
    blue:
        0: "#f5fafe"
        1: "#d6ebfc"
        2: "#add6ff"
        3: "#67b7f9"
        4: "#3399ff"
        5: "#2373e4"
        6: "#234ea1"
    green:
        1: "#E7F6D9"
        2: "#70BE44"
        3: "#459E0F"
        4: "#006F33"
    orange:
        1: "#FFDFCD"
        2: "#FFBD8D"
        3: "#FF800E"
        4: "#FF580E"
        5: "#DC370C"
    purple:
        1: "#E3DCEB"
        2: "#B8A0D8"
        3: "#71519D"
        4: "#4B2B76"

global:
    color: $color--grey--9
    font-family: "'Roboto', Helvetica, Arial, sans-serif"
    font-size: 13px

h1:
    font-size: 1.375em
    font-weight: "500"

h2:
    font-size: 1.3em
    font-weight: "500"

h3:
    font-weight: "500"

h4:
    font-weight: "500"

h5:
    font-weight: "500"

h6:
    font-weight: "500"

a:
    color: $color--blue--5
    text-decoration: none

    hover:
        text-decoration: underline

button:
    border-radius: 2px
    font-size: 12px
    min-width: 66px
    padding: 5px 7px
    primary:
        background-color: $color--blue--4
        border: 1px solid $color--blue--4
        color: white
    primary--hover:
        border: 1px solid $color--blue--5
        box-shadow: 0 0 7px 0 $color--blue--4
    secondary:
        background-color: $color--grey--2
        border: 1px solid $color--grey--4
        color: black
    secondary--hover:
        border: 1px solid $color--blue--5
        box-shadow: 0 0 7px 0 $color--blue--4
    call-to-action:
        background-color: $color--green--3
        border: 1px solid $color--green--3
        color: white
    call-to-action--hover:
        border: 1px solid $color--green--3
        box-shadow: 0 0 7px 0 $color--green--3
    disabled:
        background-color: $color--grey--1
        border: 1px solid $color--grey--4
        color: $color--grey--4
card:
    background-color: white

tooltip:
    background-color: $color--grey--8
    border-radius: 4px
    box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2)
    color: "#fff"
    padding: 10px
    arrow:
        background-color: $tooltip--background-color
        size: 6px

bubble:
    background-color: $color--grey--8
    border-radius: 4px
    padding: 10px
    light:
        background-color: $color--grey--1
        box-shadow: 1px 1px 4px 1px $color--grey--4
        color: "#000"
        arrow:
            background-color: $bubble--light--background-color
    dark:
        background-color: $color--grey--8
        box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2)
        color: "#fff"
        arrow:
            background-color: $bubble--dark--background-color
    arrow:
        size: 6px

messagebubble:
    border-radius: 4px
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15)
    border: 1px solid black
    animation-duration: 0.75s
    close:
        hover:
            color: $color--blue--4
    icon:
        success:
            color: $color--green--3
        info:
            color: $color--blue--4
        warning:
            color: $color--yellow--4
        error:
            color: $color--red--3
    success:
        border-color: $color--green--3
        background-color: $color--green--1
    error:
        border-color: $color--red--3
        background-color: $color--red--1
    info:
        border-color: $color--blue--4
        background-color: $color--blue--1
    warning:
        border-color: $color--yellow--4
        background-color: $color--yellow--1

tabs:
    margin: 1rem
    margin-bottom: -0.5em
    tab:
        border-bottom: 2px solid transparent
        font-size: 1.1em
        font-weight: bold
        margin: 0 0.5em
        padding: 0.25em 0.25em
        current:
            border-bottom: 2px solid $color--blue--4
            color: $color--blue--4
        hover:
            border-bottom: 2px solid $color--blue--4
            color: $color--blue--4
    vertical:
        border-right: 1px solid $color--grey--3
        margin: 0 1rem 0 0
        padding-right: 20px
        tab:
            height: 2.75rem
            padding: 0.25em 0

tree:
    checkbox:
        border: 1px solid black
        background-color: black
        width: 12px
        height: 12px
        background-size: 8px 8px
        indeterminate:
            width: 8px
            height: 8px
            border: 2px solid white
    switcher:
        margin: 0 1px
        width: 16px
        icon:
            left: 4px
            width: 8px
            height: 8px
    node:
        icon:
            width: 16px
            height: 16px

pill:
    min-width: 50px
    max-width: 250px
    height: 20px
    background: $color--grey--1
    border: 1px solid $color--grey--3
    border-radius: 2px
    padding-left: 8px
    font-size: 14px
    adjacent:
        margin-left: 8px
    hover:
        border-color: $color--blue--4
    label:
        padding-right: 8px
    menu:
        padding-right: 8px
    dismiss:
        font-size: 1.25em
        color: $color--grey--4

messagebox:
    title:
        font-size: 1.25em
        font-weight: bold
    icon:
        font-size: 1.25em
        error:
            color: $color--red--3
        info:
            color: $color--blue--3
        warn:
            color: $color--yellow--3
        success:
            color: $color--green--3