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

// apply natural box model to all things
*,  *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

//layout attributes for building app DOM structure and positioning elements
[block] {
    display: block;
}

[relative] {
    position: relative;
}

[fixed] {
    position: fixed;
}

[top-right] {
    position: absolute;
    top: 4px;
    right: 4px;
}

[bottom-right] {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

[flex-container] {
    display: flex;
    &[wrap] {
        flex-wrap: wrap;
    }
}

[flex] {
    display: flex;
    flex: 1 1 0;
    -ms-flex: 1 1 auto;
    align-items: center;
}
[flex-10]{
    flex: 0 0 10%;
    -ms-flex: 0 0 10%;
}

[justify-start] {
    justify-content: flex-start;
}

[justify-end] {
    justify-content: flex-end;
}

[justify-center] {
    justify-content: center;
}

[justify-between] {
    justify-content: space-between;
}

[justify-around] {
    justify-content: space-around;
}

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

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

[align-start] {
    align-items: flex-start;
}

[align-end] {
    align-items: flex-end;
}

[align-content-end] {
    align-content: flex-end;
}
[align-self-start] {
    align-self: flex-start;
}

[align-self-end] {
    align-self: flex-end;
}

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

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

[align-self-normal] {
    align-self: normal;
}

[align-baseline] {
    align-items: baseline;
}

[align-top] {
    align-content: flex-start;
}

[align-stretch] {
    align-items: stretch;
}

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

[column] {
    flex-direction: column;
}

[row] {
    flex-direction: row;
}

[flow-row-wrap] {
    flex-flow: row wrap;
}

[relative]{
    position: relative;
}

[margin-left-auto] {
    margin-left: auto;
}

[margin-right-auto] {
    margin-right: auto;
}

[margin-around-zero] {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

[position-right-bottom]{
    position: absolute;
    right: 0px;
    bottom: 0px;
}

[position-right-top]{
    position: absolute;
    right: 0px;
    top: 0px;
}

[mobile-top-right] {
    @media only screen and (max-width: @mobile) {
        top: 8px;
        right: 8px;
        position: absolute;
    }
}


[responsive-stack] {
    @media only screen and (max-width: 670px) {
        flex-flow: column;
        &[inset] {
            padding: 0px 24px;
            margin-left: 24px;
            margin-right: 24px;
        }

        &[reverse] {
          flex-flow: column-reverse;
        }

        >[grow-2], >[grow-3] {
            flex: 0 1 auto;
        }
    }
}

[responsive-stack-top] {
    @media screen and (max-width: 670px) {
        order: -1;
    }
}

[responsive-stack-top-2] {
    @media screen and (max-width: 670px) {
        order: -2;
    }
}

[responsive-hide] {
    @media screen and (max-width: 670px) {
        display: none !important;
    }
}

[mobile-stack] {
    @media only screen and (max-width: @mobile) {
        display: block;
        padding-top: 8px;
        &[inset]{
            padding: 0px 24px;
        }
        & [inset]{
            margin-left: 24px;
            margin-right: 24px;
        }

        sc-list-item {
            padding-bottom: 8px;
        }

        sc-list-item:first-child {
            max-width: 90%;
        }
    }
}

[mobile-landscape-stack] {
    @media only screen and (max-width: @mobile-landscape) {
        display: block;
        padding-top: 8px;
        &[inset]{
            padding: 0px 24px;
        }
        & [inset]{
            margin: 24px;
        }
    }
}


[landscape-stack] {
    @media only screen and (max-width: @landscape) {
        display: block;
        padding-top: 8px;
        &[inset]{
            padding: 0px 24px;
        }
        & [inset]{
            margin-left: 24px;
            margin-right: 24px;
        }

        sc-list-item {
            padding-bottom: 8px;
        }

        sc-list-item:first-child {
            max-width: 90%;
        }
    }
}


[tablet-stack] {
    @media only screen and (max-width: @tablet) {
        display: block;
        padding-top: 8px;
        &[inset]{
            padding: 0px 24px;
        }
        & [inset]{
            margin-left: 24px;
            margin-right: 24px;
        }
    }
}

[inline-block] {
    display: inline-block;
}

[inline-flex]{
    display: inline-flex;
}


[flex-auto]{
    flex: auto;
    -ms-flex: auto;
}

[flex-25] {
    flex: 0 1 25%;
    -ms-flex: 0 1 25%;
}

[flex-30] {
    flex: 0 1 30%;
    -ms-flex: 0 1 30%;
}

[flex-50] {
    flex: 0 1 50%;
    -ms-flex: 0 1 50%;
}

[flex-100] {
    flex: 0 1 100%;
    -ms-flex: 0 1 100%;
}

[grow-0] {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
}

[grow-1] {
    flex: 1 1 0;
    -ms-flex: 1 1 0;
}

[grow-2] {
    flex: 2 1 0;
    -ms-flex: 2 1 0;
}

[grow-3] {
    flex: 3 1 0;
    -ms-flex: 3 1 0;
}

[no-shrink] {
    flex-shrink: 0;
}

[auto-margin] {
    margin: auto;
}

[full-height] {
    height: 100%;
}

[height-70vh] {
    height: 70vh;
}

[mobile-full-height] {
  @media only screen and (max-width: @mobile-landscape) {
    height: 100%;
  }
}

[small-height] {
    min-height: 10px;
}

[auto-width] {
    width: auto;
}

[fit-width] {
    width: fit-content;
}

[fit-height] {
    height: fit-content;
}

[full-width] {
    width: 100%;
}

[full-width-mobile] {
    @media only screen and (max-width: @mobile) {
        max-width: 100%;
        width: 100%;
    }
}

[full-width-landscape] {
    @media only screen and (max-width: @landscape) {
        width: 100%;
    }
}

[ellipsis-container] {
    min-width: 1px;
}

[modal-empty-state] {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 24px 14px;

    p {
        margin-top: 14px;
    }
}

[border-none]{
    border: 0 !important;
}

[border-light]{
    border: 1px solid @appControlBorder;
    border-radius: 2px;
}

[border-all]{
    border: 1px solid @appControlBorder;
    padding: 5px;
    display: flex;
    border-radius: 3px;
}

[border-left] {
  border-left: 1px solid @appControlBorder;
}

[border-right] {
  border-right: 1px solid @appControlBorder;
}

[border-bottom] {
    border-bottom: 1px solid #e1e1e1;
}

[border-top] {
    border-top: 1px solid #e1e1e1;
}

[border-none] {
    border:none !important;
}

[absolute] {
    position: absolute;
}

[app-background] {
    background-color: @scBackground;
}

[black-background] {
    background-color: @appBlack;
}

[white-background] {
    background-color: @appWhite;
}

[max-100]{
    max-width: 100%;
}

[max-90]{
    max-width: 90%;
}

[max-75]{
    max-width: 75%;
}

[max-50]{
    max-width: 50%;
}

[max-40]{
    max-width: 40%;
}

[max-25] {
    max-width: 25%;
}

[width-100]{
    width: 100%;
}
[width-90]{
    width: 90%;
}
[width-75]{
    width: 75%;
}
[width-50]{
    width: 50%;
}
[width-40]{
    width: 40%;
}
[width-25] {
    width: 25%;
}
[width-20] {
    width: 20%;
}

[line-breaks]{
    white-space: pre-line;
}

[action-required] {
    background-color: #fef2cc;
    border: 1px solid #fcd868;
    border-radius: 3px;
}

[overflow-hide] {
    overflow: hidden;
}

[overflow-auto] {
    overflow: auto;
}

[float-right] {
    float: right;
}

[hover], [hover-transparent] {
    cursor: pointer;
}

[scroll] {
    height: 400px;
    overflow-y:auto;
}

[scroll-325] {
    max-height: 325px;
    overflow-y: auto;
}

[hidden]{
    display: none;
}

/*** VIEWPORT **************************************************/
// landscape-hide: <=landscape is display:none
// landscape-*: >landscape is hidden, <=landscape is display:* (where * is block, inline, or inline-block)
[landscape-block] {
    display: none !important;
}

[mobile-landscape-block] {
    display: none !important;
}

[landscape-inline] {
    display: none !important;
}

[landscape-inline-block] {
    display: none !important;
}

[landscape-inline-flex] {
    display: none !important;
}

[mobile-block] {
    display: none !important;
}

[mobile-inline] {
    display: none !important;
}

[mobile-inline-block] {
    display: none !important;
}

[mobile-landscape-block] {
    display: none !important;
}

[mobile-landscape-inline] {
    display: none !important;
}

[mobile-landscape-inline-block] {
    display: none !important;
}

[tablet-block] {
    display: none !important;
}

[tablet-inline] {
    display: none !important;
}

[tablet-inline-block] {
    display: none !important;
}

[table]{
    display: table;
}
[table-row]{
    display: table-row;
}
[table-cell]{
    display: table-cell;
}

[space-above-name-item-list] {
    margin-top: 1.4rem;
}

[space-below-name-item-list] {
    margin-bottom: 1rem;
}

@media screen and (max-width: @landscape) {
    [landscape-hide] {
        display: none !important;
    }

    [landscape-block] {
        display: block !important;
    }

    [landscape-inline] {
        display: inline !important;
    }

    [landscape-inline-block] {
        display: inline-block !important;
    }

    [landscape-inline-flex] {
        display: inline-flex !important;
    }

    [max-25] {
        max-width: 100%;
    }

    [max-50] {
        max-width: 100%;
    }

    [max-75] {
        max-width: 100%;
    }
}

@media screen and (max-width: @mobile) {
    [mobile-hide] {
        display: none !important;
    }

    [mobile-block] {
        display: block !important;
    }

    [mobile-inline] {
        display: inline !important;
    }

    [mobile-inline-block] {
        display: inline-block !important;
    }

    [max-25] {
        max-width: 100%;
    }

    [max-50] {
        max-width: 100%;
    }

    [max-75] {
        max-width: 100%;
    }
}

@media screen and (max-width: @mobile-landscape) {
    [mobile-landscape-hide] {
        display: none !important;
    }

    [mobile-landscape-block] {
        display: block !important;
    }

    [mobile-landscape-inline] {
        display: inline !important;
    }

    [mobile-landscape-inline-block] {
        display: inline-block !important;
    }

    [max-25] {
        max-width: 100%;
    }

    [max-50] {
        max-width: 100%;
    }

    [max-75] {
        max-width: 100%;
    }
}

/* @media screen and (min-width: @tablet) {
    [tablet-hide] {
        display: none !important;
    }
}*/

@media screen and (max-width: @tablet) {
    [tablet-hide] {
        display: none !important;
    }

    [tablet-block] {
        display: block !important;
    }

    [tablet-inline] {
        display: inline !important;
    }

    [tablet-inline-block] {
        display: inline-block !important;
    }

    [max-25] {
        max-width: 100%;
    }

    [max-50] {
        max-width: 100%;
    }

    [max-75] {
        max-width: 100%;
    }
}

[smaller-icon] {
    svg {
        width:0.9em !important;
    }
}

// Print attributes
@media print {
  [avoid-breaks-inside] {
    page-break-inside: avoid;
  }
}