/* Copyright (C) 2016 NooBaa */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: @font-family1;
    font-weight: @font-light;
    font-size: @font-size3;
    overflow: hidden;
    color: rgb(var(--color11));
    background-color: rgb(var(--color05));
}

body:not(.preview) .preview-only {
    display: none !important;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    line-height: 1.3;
    margin: 0;
}

h1, h2, h3, h4, h5 {
    margin: 0;
}

fieldset {
    border: none;
}

ul, ol {
    line-height: 1.3;
}

label {
    cursor: @cursor-pointer;

    &.disabled {
        cursor: default;
    }
}

hr {
    border: none;
    border-top: 1px solid rgb(var(--color07));
    margin: 0;
}

vr {
    width: 1px;
    min-width: 1px;
    background-color: rgb(var(--color07));
    margin: 0;
    align-self: stretch;
}

output {
    margin-bottom: .5em;
    margin-right: 1em;
    line-height: 1.4;
    padding: 1px 0;
    border-bottom: 1px solid transparent;
}

pre {
    font-size: @font-size1;
    line-height: 1.3;
    margin: 0;
}

:focus {
    outline: none;
}

::-webkit-scrollbar  {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    margin: 2px;
}

::-webkit-scrollbar-thumb  {
    background-color: rgb(var(--color08));
    border: 3px solid rgb(var(--color01));
    border-radius: 5px;
}

::-webkit-scrollbar-corner {
    border-color: transparent;
}

.no-overflow {
    overflow-y: hidden;
}

.scroll-overflow {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.auto-overflow {
    overflow-y: auto;
    scroll-behavior: smooth;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.valign-top {
    vertical-align: top;
}

.valign-bottom {
    vertical-align: bottom;
}

.valign-middle {
    vertical-align: middle;
}

.list-no-style {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.no-wrap {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.rotate {
    transition: transform 250ms ease-out;

    &.deg0, &.deg360, &.deg-360 {
        transform: rotate(0deg);
    }

    &.deg90 {
        transform: rotate(90deg);
    }

    &.deg180 {
        transform: rotate(180deg);
    }

    &.deg270 {
        transform: rotate(270deg);
    }

    &.deg-90 {
        transform: rotate(-90deg);
    }

    &.deg-180 {
        transform: rotate(-180deg);
    }

    &.deg-270 {
        transform: rotate(-270deg);
    }
}

.heading1 {
    line-height: 1.7;
    font-size: @font-size6;
    color: rgb(var(--color17));
    font-weight: @font-light;
}

.heading2 {
    line-height: 1.7;
    font-size: @font-size5;
    color: rgb(var(--color17));
    font-weight: @font-light;
}

.heading3 {
    line-height: 1.7;
    font-size: @font-size4;
    color: rgb(var(--color17));
    font-weight: @font-light;
}

.remark {
    font-size: @font-size1;
    font-weight: @font-light;
    line-height: 1.4;
    color: rgb(var(--color11));

    .link {
        font-size: @font-size1;
    }
}

.hint {
    .remark();
    position: relative;
    margin-top: -1em;
    top: 1.2em;
    line-height: 1;
    height: 1em;
}

.highlight {
    color: rgb(var(--color17));

    &.disabled,
    .disabled & {
        color: rgb(var(--color09));
    }

    &.warning, .warning & {
        .warning();
    }

    &.success, .succss & {
        .success();
    }

    &.error, .error & {
        .error();
    }

    &.info, .info & {
        .info();
    }
}

.success {
    color: rgb(var(--color27));
    font-weight: @font-regular;
}

.warning {
    color: rgb(var(--color26));
    font-weight: @font-regular;
}

.error {
    color: rgb(var(--color31));
    font-weight: @font-medium;
}

.info {
    color: rgb(var(--color23));
    font-weight: @font-regular;
}

.disabled {
    &,
    .success,
    .warning,
    .error,
    .info {
        color: rgb(var(--color09));
    }
}

.bullet-list {
    margin: 0;
    padding: 0;
    padding-left: @gutter;
    line-height: 1.8;
}

.text-tech {
    line-height: 1.5;
    font-family: @font-family2;
    font-size: @font-size2;
    font-weight: @font-thin;
    padding: .25em .5em;
}

.sticky {
    overflow-y: hidden;
    background-color: rgba(var(--color13), .5);
    outline: 1px solid rgb(var(--color13));
    outline-offset: -1px;
    position: relative;

    &.sticky-error {
        background-color: rgba(var(--color31), .5);
        outline-color: rgb(var(--color31));
    }

    &.sticky-warning {
        background-color: rgba(var(--color26), .5);
        outline-color: rgb(var(--color26));
    }

    &.sticky-success {
        background-color: rgba(var(--color27), .5);
        outline-color: rgb(var(--color27));
    }

    .sticky-content {
        padding: @gutter/2 @gutter;
        color: rgb(var(--color15));
        font-weight: @font-medium;
    }

    svg-icon {
        fill: rgb(var(--color15));
    }

    vr {
        align-self: stretch;
        background-color: rgb(var(--color15));
        margin: 0 @gutter;
    }

    .sticky-content {
        margin-top: -36px;
        transition: margin-top 500ms ease-out;
    }

    &.active .sticky-content {
        margin-top: 0;
    }

    .sticky-action {
        font-size: @font-size2;
        font-weight: @font-regular;
        border: none;
        background: none;
        display: inline;
        padding: 0;
        color: rgb(var(--color18));
        text-decoration: underline;
        cursor: @cursor-pointer;
    }
}

.hide {
    position: absolute; /* Changed from fixed to absolute to prevent the lost of parentOffset */
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    max-width: 0;
    max-height: 0;
}

.pad {
    padding: @gutter;
}

.pad-double {
    padding: @gutter * 2;
}

.pad-half {
    padding: @gutter/2;
}

.pad-quarter {
    padding: @gutter/4;
}

.vpad {
    padding-top: @gutter;
    padding-bottom: @gutter;
}

.vpad-double {
    padding-top: 2 * @gutter;
    padding-bottom: 2 * @gutter;
}

.hpad {
    padding-right: @gutter;
    padding-left: @gutter;
}

.hpad-double {
    padding-right: 2 * @gutter;
    padding-left: 2 * @gutter;
}

.pad-left {
    padding-left: @gutter;
}

.pad-right {
    padding-right: @gutter;
}

.pad-top {
    padding-top: @gutter;
}

.pad-bottom {
    padding-bottom: @gutter;
}

.borders {
    border: 1px solid rgb(var(--color07));
}

.border-bottom {
    border-bottom: 1px solid rgb(var(--color07));
}

.border-top {
    border-top: 1px solid rgb(var(--color07));
}

.border-left {
    border-left: 1px solid rgb(var(--color07));
}

.border-right {
    border-right: 1px solid rgb(var(--color07));
}

.break-words {
    word-wrap: break-word;
}

.cursor-pointer {
    cursor: @cursor-pointer;
}

.bg-stars {
    /*
    https://unsplash.com/license
    https://unsplash.com/collections/136301/space?photo=NORa8-4ohA0
    */
    background: url('@{assets}/stars.jpg');
    background-size: cover;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
    not supported by any browser */
}

.beta-tag::after {
    content: 'BETA';
    display: inline-block;
    background: rgb(var(--color28));
    border-radius: 6px;
    font-size: 10px;
    padding: 3px;
    opacity: 1;
    line-height: 1.1;
    font-weight: 500;
}

.restriction-list {
    .list-no-style();
    .remark();

    &.disabled {
        color: rgb(var(--color09));
    }

    padding-left: 0;

    > li {
        &::before {
            content: '\2022';
            text-align: center;
            display: inline-block;
            width: 5px;
            margin-right: 1em;
        }

        &.success::before {
            content: '\2713';
        }

        &.error::before {
            content: '\2715';
        }
    }
}

.count-indicator(@left, @top) {
    @size: 10px;
    position: relative;

    &::after {
        position: absolute;
        left: @left;
        top: @top;
        content: attr(data-count);
        display: block;
        min-width: @size;
        height: @size;
        line-height: 100%;
        padding: 2px;
        background-color: rgb(var(--color02));
        color: rgb(var(--color20));
        border-radius: @size;
        text-align: center;
        font-size: 11px;
        z-index: 1;
    }

    &.warning::after {
        border: 1px solid rgb(var(--color26));
        background: transparent;
        color: rgb(var(--color26));
        font-weight: @font-medium;

    }

    &.error::after {
        border: 1px solid rgb(var(--color31));
        background: transparent;
        color: rgb(var(--color31));
        font-weight: @font-medium;
    }
}

dirty-mark {
    vertical-align: text-top;
    font-size: @font-size1;
    color: rgb(var(--color31));

    &::after {
        content: '*';
    }
}

.preserve-whitespaces {
    white-space: pre;
}

.preserve-whitespaces-wrap {
    white-space: pre-wrap;
}

.blur {
    filter: blur(4px);
}

.scale-on-hover {
    &:hover {
        transform: scale(1.15, 1.15);
    }

    &.disabled, &:disabled {
        &:hover {
            transform: unset;
        }
    }
}

.round-corners {
    border-radius: 3px;
}

.card-bg {
    background-color: rgb(var(--color32));
}

.card-decor {
    border-left: 4px solid rgb(var(--color22));
}

.card-shadow {
    box-shadow: 0px 2px 4px rgba(var(--shadow2));
    margin-bottom: 3px;
}

.card {
    .card-bg;
    .card-shadow;
    .card-decor;
}

.content-box {
    background-color: rgb(var(--color03));

    &::-webkit-scrollbar-thumb,
    ::-webkit-scrollbar-thumb {
        border: 3px solid rgb(var(--color03));
    }
}

.warning-box {
    background-color: rgb(var(--color32));
    border: 1px solid rgb(var(--color26));
}

.info-box {
    background-color: rgb(var(--color32));
    border: 1px solid rgb(var(--color23));
}

.text-thin {
    font-weight: @font-thin;
}

.text-light {
    font-weight: @font-light;
}

.text-bold {
    font-weight: @font-medium;
}

.tag {
    border-radius: 2px;
    font-size: @font-size1;
    font-weight: @font-regular;
    color: rgb(var(--color11));
    padding: @gutter/4 @gutter/2;
    background-color: rgb(var(--color07));
    text-align: center;

    a& {
        color: rgb(var(--color21));

        &:hover {
            text-decoration: underline;
        }
    }
}

svg-icon.circled-icon {
    box-sizing: content-box;
    border: 2px solid rgb(var(--color24));
    fill: rgb(var(--color24));
    border-radius: 30px;
    padding: @gutter * 2/3;
}

/* Handles theme transition effect */
body,
.card-bg,
.content-box,
.tabs-row,
.warning-box {
    transition: background-color 300ms ease-out;
}
