@import "../ui.vars.less";

// 16px = 1rem
// see figma design specification:
// https://www.figma.com/file/fxzBdXCoG3s9WwzU5qcZ1m/Web-Design-System?node-id=0%3A1

html {
    font-size: 16px;
    font-family: 'Graphik', sans-serif;
}

body {
    color: @scText;
    line-height: 1.25rem;
    font-size: 1rem;
    font-weight: normal;
    -webkit-text-stroke: 1px transparent;
}

b, strong, th {
    font-weight: 500;
}

h1 {
    font-size: 3rem;
    font-weight: 700;
    line-height: 3.75rem;
}

h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 2.813rem;
}

h3 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 2.25rem;
}

h4 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
}

h5 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.625rem;
}

h6 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.375rem;
}

h1, h2, h3, h4, h5, h6, p {
    &[success] {
        color: @Positive_700;
    }
    &[positive] {
        color: @Positive_400;
    }
    &[info] {
        color: @General_700;
    }
    &[general] {
        color: @General_400;
    }
    &[warning] {
        color: @Warning_700;
    }
    &[danger] {
        color: @Negative_700;
    }
    &[danger-light] {
        color: @Negative_400;
    }
    &[negative] {
        color: @Negative_400;
    }
}

[body-2] {
    font-size: @body-2;
    line-height: 1.25rem;
}

[caption] {
    font-size: @caption;
    line-height: 1rem;
}

[label=""] { // this is [body-2] + [medium] for area labels
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

[input-label] {
    color: @text-500;
    font-size: @body-2;
}

[text-000] {
    color: @text-000;
}

[text-100] {
    color: @text-100;
}

[text-200] {
    color: @text-200;
}

[text-300] {
    color: @text-300;
}

[text-400] {
    color: @text-400;
}

[text-500] {
    color: @text-500;
}

[text-600] {
    color: @text-600;
}

[text-700] {
    color: @text-700;
}

[text-800] {
    color: @text-800;
}

[text-900] {
    color: @text-900;
}

[disabled] {
    color: @text-300;
}

p {
    font-weight: normal;
    &[smaller] { // [smaller] and [detail] are deprecated in favor of [caption]
        font-size: 0.75rem;
    }
}

a[inverted], a[inverted]:active, a[inverted]:visited, a[inverted]:focus {
    color: @appWhite;
}

[bolder] {
    font-weight: 900;
}

[semi-bold] {
    font-weight: 600;
}

[bold] {
    font-weight: 500;
}

[thin] {
    font-weight: 200;
}

[italic] {
    font-style: italic;
}

[normal] {
    font-weight: 400;
}

[lowercase] {
    text-transform: lowercase;
}

[uppercase] {
    text-transform: uppercase;
}

[capitalize] {
    text-transform: capitalize;
}

[underline] {
    text-decoration: underline;
}

[strikethrough] {
    text-decoration: line-through;
}

[no-decoration] {
    text-decoration: none;
}

[transparent] {
    opacity: 0;
}

[opacity-30] {
    opacity: .3;
}

[opacity-40] {
    opacity: .4;
}

[opacity-50] {
    opacity: .5;
}

[opacity-60] {
    opacity: .6;
}

[opacity-70] {
    opacity: .7;
}

[opacity-80] {
    opacity: .8;
}

[opacity-90] {
    opacity: .9;
}

[empty-state] {
    font-weight: bold;
    font-style: italic;
    color: @text-300;
}

[expired] {
    text-decoration: line-through;
    opacity: .5;
}

[dates-month] {
    font-size: 0.625rem;
    font-weight: 500;
}

[detail] {
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1rem;
    opacity: 0.8;

    &.warning, [warning] {
        font-style: italic;
    }
}

[no-wrap] {
    white-space: nowrap;
}

[normal-wrap] {
    white-space: normal;
}

[hard-wrap] {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

[text-left] {
    text-align: left;
}

[text-center] {
    text-align: center;
}

[text-center-landscape] {
    @media only screen and (max-width: @mobile-landscape) {
        text-align: center;
    }
    @media only screen and (max-width: @tablet) {
        text-align: center;
    }
}

[text-center-mobile] {
    @media only screen and (max-width: @mobile) {
        text-align: center;
    }
}

[text-left-mobile] {
    @media only screen and (max-width: @mobile) {
        text-align: left;
    }
}

[text-right-mobile] {
    @media only screen and (max-width: @mobile) {
        text-align: right;
    }
}

[text-right] {
    text-align: right;
}

[text-middle] {
    vertical-align:middle
}

[text-inline] {
    display: inline;
}

[float-left]{
    float: left;
}

[no-line-height] {
    line-height: .1;
}

[less-line-height] {
    line-height: 1.2;
}

[more-line-height] {
    line-height: 1.5;
}

[line-through] {
    text-decoration: line-through;
}

[mobile-show] {
    display: none;
    @media only screen and (max-width: @mobile) {
        display: block;
    }
}

[landscape-inline-flex-show] {
    display: none;
    @media only screen and (max-width: @landscape) {
        display: inline-flex;
    }
}

[light-text] {
    color: @appWhite;
    &[hover]:hover{
        color: @appWhite;
    }
}

[action-text] {
    color: @scAction;
}

[primary] {
    color: @scAction;
}

[reserve-space] {
    height: 1.4rem
}

[ellipsis] {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding-right: 8px;
    flex: 1 1 0; //prevents avatars from being squished when text and avatars are in the same flex-items
    -ms-flex:  1 1 0;
}

[user-select-none] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

[clickable] {
    &:hover{
        opacity: 1;
    }
    cursor: pointer;
}

/* placeholder color is browser dependent */
::-webkit-input-placeholder { /* WebKit browsers */
    color: #949494;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #444444;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #444444;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #949494;
}

[small-font]{
    font-size: 10px;
}

[medium-font] {
    font-size: 16px;
}

[large-font]{
    font-size: 20px;
}