@import 'vars';
@import 'mixins';

/* stylelint-disable no-descending-specificity */
/* stylelint-disable selector-class-pattern */

body {
    background: $color-background;
}

main {
    @include fixed($size-header, 0, 0, 0);
    overflow-y: auto;
    padding: 2rem;
    padding-left: 2rem + $size-sidebar;
}

.form-text {
    font-size: $font-size-sm;
    font-weight: normal;
    line-height: 1.75;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.cursor-pointer {
    cursor: pointer;
}

.col-refresh {
    width: 4rem;
}

.gap-2 {
    gap: .25rem;
}

.gap-4 {
    gap: .5rem;
}

.gap-6 {
    gap: .75rem;
}

.gap-8 {
    gap: 1rem;
}

code {
    color: $color-primary;
}

label {
    font-size: $font-size-sm;
    font-weight: 500;

    &.col-form-label {
        font-size: $font-size-sm;
        font-weight: 500;
        text-align: right;
    }

    .custom-toggle-label {
        font-size: inherit;
        font-weight: normal;
    }
}

.rules {
    & {
        overflow-x: auto;
    }

    &-label {
        display: inline-block;
        font-size: $font-size-sm;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .row {
        flex-wrap: nowrap;
    }

    .card {
        margin-bottom: .375rem;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .card,
    .card-header {
        border-color: rgba(0, 0, 0, 12%);
    }

    .card-header {
        background-color: transparent;

        &.collapsed {
            border: 0;
        }

        .form-group {
            margin: 0;
        }
    }

    hr {
        border-color: $color-border;
    }

    &-expand {
        @include force-width(3rem);
    }

    &-send {
        @include force-width(10rem);
    }

    &-delay {
        @include force-width(5rem);
    }

    &-type {
        @include force-width(8rem);
    }

    &-condition {
        min-width: 10rem;
        max-width: 100%;
    }
}

.variant {
    &-label {
        display: inline-block;
        padding-left: .5rem !important;
        padding-right: .5rem !important;
        padding-top: .5rem;
    }
}

legend {
    border-bottom: 1px solid rgba(0, 0, 0, 10%);
    font-size: $font-size-sm;
    font-weight: normal;
    margin-bottom: 1.5rem;
    padding-bottom: .25rem;
    padding-top: 2rem;
    text-transform: uppercase;
}

fieldset {
    &:first-child {
        & > legend {
            padding-top: 0;
        }
    }
}

.localized-value {
    position: relative;

    .localized-input {
        padding-bottom: 0;
        padding-top: 2rem;
        position: relative;
    }

    .col-form-label {
        position: static;
        margin-bottom: 0;
        margin-top: 2rem;
    }

    .localized-languages {
        @include absolute(0, 0, null, null);
    }

    > label {
        @include absolute(.25rem, null, null, 0);
    }
}

.mono {
    font-family: monospace;
}

.pagination {
    margin: 0;
}

.no-padding {
    padding: 0 !important;
}

.overlay {
    & {
        display: flex;
        flex-direction: row;
        flex-grow: 0;
        z-index: 10000;
    }

    &-target {
        display: inline-block;
    }

    .dropdown-menu {
        background: $color-white;
        display: block;
        outline-style: none;
        overflow-x: visible;
        overflow-y: auto;
        position: static;
    }
}

//
// Status Icon
//
.status-icon {
    & {
        @include circle-icon(2rem);
        background: $color-border;
        border: 0;
        color: $color-white;
        display: inline-block;
    }

    &-sm {
        @include circle-icon(1.6rem);
    }

    &-lg {
        @include circle-icon(2.8rem);
    }

    &-pending {
        color: inherit;
    }

    &-warning {
        background: $color-warning;
    }

    &-failed {
        background: $color-error;
    }

    &-success {
        background: $color-success;
    }
}

.navbar {
    & {
        padding-left: $size-sidebar + 2rem;
    }

    &-brand {
        @include absolute(0, auto, 0, 0);
        @include box-shadow-outer(2px, 0, 4px, .1);
        background: $color-primary-darken;
        border-right: 1px solid darken($color-primary-darken, 1%);
        font-size: 2rem;
        font-weight: lighter;
        line-height: $size-header;
        text-align: center;
        text-transform: none;
        width: $size-sidebar;

        svg {
            max-height: 65%;
        }
    }

    &-nav {
        flex-direction: row;

        .nav-link {
            color: $color-white !important;
            padding-bottom: .5rem !important;
            padding-top: .5rem !important;
        }

        .dropdown-menu {
            position: absolute !important;
        }
    }

    & .notifo {
        .notifo {
            &-button {
                margin-left: 1rem;
                margin-right: 1rem;
                padding: .375rem;

                svg {
                    fill: $color-white;
                    height: 20px;
                    max-height: 20px;
                    max-width: 20px;
                }

                @media (max-width: $breakpoint-lg) {
                    margin-right: 1.5rem;
                }
            }

            &-modal {
                @media (max-width: $breakpoint-xl) {
                    @include fixed(60px, 10px, 20px, auto);
                    max-width: 90vw;
                }
            }
        }
    }
}

.nav-pills {
    .nav-item {
        &:not(:last-child) {
            padding-right: .75rem;
        }
    }
}

.close {
    padding: 1.25rem !important;

    & {
        opacity: .75;
    }

    span {
        color: $color-text !important;
        font-size: 1.25rem !important;
        font-weight: normal !important;
    }

    &:hover {
        opacity: 1 !important;
    }
}

.fullscreen {
    background: none;
    border: 0;
    border-radius: 0;
    line-height: 0;
    opacity: .75;
    padding: 1.25rem;
    padding-top: 1.125rem;

    i {
        color: $color-text;
        font-size: 1.25rem !important;
        font-weight: normal !important;
        height: 1.25rem;
    }

    &:hover {
        opacity: 1;
        transition: none;
        transform: none;
    }
}

.nav-tabs2 {
    flex-wrap: nowrap;

    .nav-item {
        @include truncate;
    }

    .nav-link {
        @include truncate;
        border-bottom: 3px solid transparent;
        border-top: 3px solid transparent;
        cursor: pointer;
        font-size: 1.25rem;
        font-weight: normal;
        margin-right: 2rem;
        padding: .25rem 0;

        &.active {
            color: #32325d;
            border-bottom-color: $color-primary;
            border-top-color: transparent;
        }

        &:hover {
            border-bottom-color: $color-primary-darken;
        }
    }
}

$small-gutters: 4px;

.small-gutters {
    margin-left: -$small-gutters;
    margin-right: -$small-gutters;

    > .col,
    > [class*='col-'] {
        padding-left: $small-gutters;
        padding-right: $small-gutters;
    }
}

.col-button {
    overflow: hidden;

    .btn-group {
        max-width: 100%;
    }
}

.btn-flat {
    box-shadow: none;

    &:hover {
        box-shadow: none;
    }

    &:focus {
        box-shadow: none !important;
    }
}

.btn-font-lg {
    font-size: 1rem;
}

.btn-simple {
    color: $color-primary;
}

.btn-icon {
    font-size: 1.25rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
}

.card {
    &-title {
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: .5rem;
        margin-top: 1rem;
    }

    &-table {
        & {
            margin-bottom: 1rem;
        }

        .table {
            margin: 0;
        }

        .card-body {
            padding-bottom: .5rem;
            padding-left: .5rem;
            padding-right: .5rem;

            & > div {
                overflow-x: hidden;
            }
        }
    }

    &-link {
        & {
            color: inherit;
            display: inline-block;
        }

        &:hover,
        &:focus {
            color: inherit;
            text-decoration: none;
        }
    }

    &-card {
        margin-bottom: 1rem;
        margin-right: 1rem;
        width: 17rem;
    }

    &-header {
        position: relative;

        .close {
            @include absolute(50%, 0);
            margin: -30px 0 0;
        }

        .fullscreen {
            @include absolute(50%, 4rem);
            margin: -30px 0 0;
        }
    }
}

.timeline {
    position: relative;

    &-v {
        @include absolute(.375rem, null, 3rem);
        border-left: 2px dashed darken($color-border, 10%);
    }

    &-item {
        position: relative;
        padding-left: 1.5em;
        padding-bottom: 1rem;

        &::before {
            @include absolute(.375rem, null, null, -3px);
            @include circle(8px);
            content: '';
            border: 2px solid darken($color-border, 10%);
            background-position: 0%;
            background-color: $color-white;
        }
    }

    &-date {
        font-size: $font-size-sm;
    }
}

.empty-button {
    padding-top: 10rem;
    text-align: center;
    text-decoration: none;

    label {
        display: block;
        font-size: 1.2rem;
        font-weight: normal;
        margin-bottom: 2rem;
    }
}

.code-editor {
    border: 1px solid $color-border;
    border-radius: 0;
    font-size: 14px;

    .CodeMirror-foldmarker {
        color: $color-text;
        text-decoration: none;
        text-shadow: none;
    }

    &.auto {
        .CodeMirror {
            height: auto;
        }
    }
}

.transition-all {
    transition: all .2s ease-in-out;
}

.alert {
    position: relative;

    ul {
        margin-bottom: 0;
        margin-top: .5rem;
    }

    p {
        margin-bottom: .25rem;
    }

    p:last-child {
        margin: 0;
    }

    &-form {
        color: darken($color-text, 10%) !important;
        background: lighten($color-background, 2%);
        border: 0;
        border-radius: $border-radius;
        line-height: 1.7;
        padding-left: 4rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;

        &-bordered {
            background: $color-white;
            border: 1px solid $color-border-dark;
            border-radius: $border-radius;
        }

        & > i {
            @include absolute(1rem, null, null, 1rem);
            font-size: 1.75rem;
        }

        ul,
        ol {
            line-height: 1.7;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.table-footer {
    label {
        font-weight: normal;
    }
}

.statistics {
    &-card {
        height: 100%;

        .card-body {
            padding-bottom: .75rem;
            padding-left: 1rem;
            padding-top: .75rem;
        }

        .card-header {
            align-items: center;
            background: $color-white;
            border: 0;
            display: flex;
            font-size: $font-size-sm;
            font-weight: normal;
            padding: .5rem 0 0 1rem;
        }

        .icon-mobile {
            font-size: 1rem;
        }

        &-total {
            font-size: 1.75rem;
            font-weight: normal;
            white-space: nowrap;

            small {
                font-size: .75rem;
                font-weight: normal;
                margin-left: .5rem;
            }
        }

        &-detail {
            line-height: 1.1rem;
            margin-top: .5rem;
            text-align: left;
            text-decoration: none;

            small {
                font-size: .75rem;
            }
        }

        &-icon {
            font-size: 1rem;
            font-weight: lighter;
            margin-right: .25rem;
        }

        table {
            margin: 0;
        }
    }

    &-label {
        @include truncate;

        & {
            display: inline-block;
        }

        span {
            display: inline-block;
            font-family: monospace;
            font-size: 1rem;
            margin-left: .25rem;
            margin-right: .25rem;
        }
    }

    &-failed {
        color: $color-error;
    }
}

//
// BADGES
//
.badge {
    i {
        margin-left: .5rem;
    }

    &-lg {
        font-size: 80%;
    }

    &-option {
        text-transform: none;
    }
}

//
// POPOVER
//
.popover {
    &-inner {
        max-height: 300px;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .arrow {
        z-index: -1;
    }
}

//
// LIST ITEMS
//
.list {
    &-item {
        &-empty {
            font-size: $font-size-sm;
        }

        &-summary,
        &-empty {
            background: $color-white;
            transition: border-color .3s ease;

            td {
                border-bottom: 2px solid $color-border;
                border-top: 0;
                transition: border-color .3s ease;

                &:first-child {
                    border-left: 1px solid $color-border;
                }

                &:last-child {
                    border-right: 1px solid $color-border;
                }
            }
        }

        &-summary {
            border: 2px solid $color-white;

            &:hover {
                border: 2px solid lighten($color-primary, 10%);

                td {
                    border-bottom-color: lighten($color-primary, 10%);
                }
            }

            &.expanded {
                td {
                    border-bottom-color: $color-white;
                }

                &:hover {
                    td {
                        border-bottom-color: lighten($color-primary, 10%);
                    }
                }
            }

            &.selected {
                border: 2px solid $color-primary;

                td {
                    border-bottom-color: $color-primary;
                }
            }
        }

        &-details {
            td {
                background: lighten($color-background, 2%);
                border-bottom: 2px solid $color-border;
                border-top: 0;

                &:first-child {
                    border-left: 1px solid $color-border;
                }

                &:last-child {
                    border-right: 1px solid $color-border;
                }
            }

            .table-borderless {
                td {
                    border: 0;
                }
            }

            .table {
                margin: 0;
            }
        }

        &-separator {
            height: 4px;
        }
    }
}

div {
    &.list-item-empty {
        border-bottom: 2px solid $color-border;
        border-left: 1px solid $color-border;
        border-right: 1px solid $color-border;
        padding: 1rem;
    }
}

.react-tooltip {
    z-index: 9000;
}

//
// Error tooltip.
//
.errors {
    // Container where the tooltip is placed.
    &-container {
        position: relative;
    }

    // Small triangle under the error tooltip with the border trick.
    &::after {
        @include absolute(auto, auto, -.7rem, .625rem);
        @include caret-bottom($color-error, .4rem);
        z-index: 1000;
    }

    // The tooltip rectangle itself.
    & {
        @include absolute(auto, auto, .4rem, 0);
        @include border-radius(2px);
        background: $color-error;
        border: 0;
        border-radius: 0;
        color: $color-white;
        cursor: none;
        display: inline-block;
        font-size: .9rem;
        font-weight: normal;
        line-height: 1.1rem;
        padding: .25rem .6rem;
        padding-left: .75rem;
        white-space: nowrap;
        width: auto;
        z-index: 1000;
    }

    &-right {
        @include absolute(auto, 0, .4rem, auto);

        &::after {
            @include absolute(auto, .625rem, -.7rem, auto);
        }
    }
}

//
// Demo
//
.demo {
    &-container {
        max-width: 700px;
    }

    &-logo {
        height: 40px;
    }

    &-text p {
        margin-bottom: 0
    }
}

//
// Sidebar
//
@mixin build-active {
    @include absolute(.5rem, null, .5rem, 0);
    background: $color-primary;
    border: 0;
    border-radius: 0;
    content: '';
    width: 4px;
}

.sidebar {
    & {
        @include fixed($size-header, auto, 0, 0);
        @include box-shadow-outer(2px, 0, 4px, .05);
        background: $color-white;
        border: 0;
        border-right: 1px solid $color-border;
        flex-direction: column;
        flex-wrap: nowrap;
        width: $size-sidebar;
        z-index: 1000;
    }

    .dropdown-toggle {
        &::after {
            @include absolute(1.125rem, .75rem);
            font-size: .75rem;
        }
    }

    .nav-publish {
        @include absolute(null, 0, 0, 0);

        @media (0 <= height <= 590px) {
            display: none;
        }
    }

    .nav-item {
        line-height: 1.25rem;
        padding-bottom: 1rem;
        padding-top: 1rem;
        text-align: center;

        &.active {
            .nav-link {
                color: $color-primary;
                
                &::before {
                    @include build-active;
                }
            }
        }
    }

    .nav-link {
        & {
            cursor: pointer !important;
            font-size: 1.75rem;
            font-weight: normal;
            position: relative;
        }

        &.active {
            &::before {
                @include build-active;
            }
        }

        &:hover {
            color: $color-primary !important;
        }

        span {
            display: block;
            font-size: $font-size-sm;
            font-weight: normal;
            margin-top: .125rem;
        }
    }
}

//
// Password control and clear input
//
.input {
    &-container {
        position: relative;

        textarea {
            padding-right: 4rem;
        }

        input {
            padding-right: 4rem;
        }

        & > .overlay-target {
            @include absolute(0, 0, 0);
            display: block;
        }

        &.textarea {
            & > .overlay-target {
                bottom: auto;

                .input-btn {
                    position: static;
                }
            }
        }
    }

    &-btn {
        @include absolute(0, 0, 0);
        background: 0;
        border: 0;
        border-radius: 0;
        color: $color-text;
        padding-left: 1rem;
        padding-right: 1rem;

        & > i {
            display: block;
        }

        i.rotate {
            transition: .2s ease-in transform;
        }

        &:focus {
            box-shadow: none !important;
        }

        &:hover {
            box-shadow: none !important;

            i.rotate {
                transform: rotate(90deg);
            }
        }
    }

    &-btn-lg {
        top: 2px;
    }
}

em-emoji-picker {
    background-color: $color-white;
    border-radius: $border-radius;
    box-shadow: $dropdown-box-shadow;
    margin-top: 2px;
}

.code-details {
    border: 1px solid $color-input;
    border-radius: $border-radius;
}

//
// Search
//
.search {
    &-container {
        max-width: 100%;
        min-width: 200px;
        position: relative;

        input {
            border-radius: 40px;
            padding-left: 2.5rem;
            padding-right: 3rem;
        }
    }

    &-icon {
        @include absolute(50%, null, null, .75rem);
        font-size: 1.25rem;
        font-weight: lighter;
        margin-top: -.6125rem;
    }

    &-btn {
        @include absolute(0, .5rem, null, null);
        font-size: 1.25rem;
        font-weight: lighter;
        padding-left: .5rem;
        padding-right: .5rem;

        &,
        &:active,
        &:hover,
        &:focus {
            background: none !important;
            border: 0 !important;
            box-shadow: none !important;
        }
    }
}

//
// Helpers
//
.table {
    &-fixed {
        table-layout: fixed;
    }

    &-middle {
        td,
        th {
            vertical-align: middle;
        }
    }

    &-simple {
        thead {
            th {
                border: 0;
            }
        }
    }

    th {
        font-size: $font-size-sm;
        padding-bottom: .5rem;
        padding-top: .5rem;
    }

    td {
        font-size: $font-size-sm;

        &.bordered {
            border: 1px solid $color-table;
        }
    }

    &-sm-text {
        font-size: $font-size-sm;
    }
}

.popper-lg {
    max-width: 500px;
}

.bs-popover-left,
.bs-popover-auto[x-placement^='left'] {
    & > .arrow {
        margin: 0 0 .3rem;
        margin-right: .1rem;
    }
}

.text-icon {
    font-size: 1.25rem;
}

.text-sm {
    font-size: $font-size-sm;
}

.text-xs {
    font-size: $font-size-xs;
}

.text-lg {
    font-size: 1.25rem;
}

.text-xxl {
    font-size: 3rem;
}

.truncate {
    @include truncate;
}

.no-overflow {
    overflow: hidden;
}

.modal {
    & {
        overflow: hidden;
    }

    &-dialog {
        @include absolute(0, 0, 0, 0);

        &.fullscreen-mode {
            .modal-content {
                @include fixed(0, 0, 0, 0);
                border: 0;
                border-radius: 0;
            }
        }
    }

    &-body {
        overflow-y: auto;
    }

    &-content {
        max-height: 100%;

        form {
            display: flex;
            flex-direction: column;
            max-height: 100%;
            max-width: none;
            overflow-y: hidden;
        }
    }

    &-title {
        flex-grow: 1;
        padding-left: 1rem;
        padding-right: 3rem;

        .row {
            flex-grow: 1;
        }
    }

    &-header {
        position: relative;

        .nav-tabs2 {
            @include absolute(null, null, 0);

            .nav-link {
                font-size: 1rem;
                font-weight: normal;
                padding: 1rem 0;
            }
        }

        .close {
            @include absolute(50%, 0);
            margin: -30px 0 0;
        }

        .fullscreen {
            @include absolute(50%, 4rem);
            margin: -30px 0 0;
        }
    }
}

.header {
    & {
        margin-bottom: .5rem;
        margin-top: 0;
        min-height: 2.75rem;
    }

    h2 {
        @include truncate;
        margin: 0;
    }

    h3 {
        @include truncate;
        margin: 0;
    }

    h4 {
        @include truncate;
        margin: 0;
    }
}

//
// Pagination
//
.page-link {
    &:disabled {
        opacity: .5;
    }
}

.pager {
    & {
        display: inline-block;
    }

    &-info {
        font-size: $font-size-sm;
        line-height: 2rem;
        text-align: center;
        text-decoration: none;
        width: 10rem;
    }
}

.loader {
    div {
        display: inline-block !important;
    }
}

textarea {
    &.form-control {
        height: 10rem;
    }
}

.publish-modal {
    .fullscreen {
        @media (max-width: $breakpoint-xl) {
            display: none;
        }
    }

    .col-form {
        fieldset {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    .col-template {
        width: 660px;
        padding-left: 3rem;
        padding-right: 15px;

        @media (max-width: $breakpoint-xl) {
            display: none;
        }
    }

    &.fullscreen-mode {
        @media (min-width: $breakpoint-xl) {
            .col-form {
                border-right: 1px solid $color-border;
                padding-left: 15px;
                padding-right: 3rem;
                overflow: hidden;
            }
        }
    }

    .preview-container {
        background-color: $color-background;
        border: 2px solid $color-border;
        border-radius: 2px;
        width: 600px;
        text-align: left;
        text-decoration: none;
    }
}

.multi-filter {
    flex-wrap: nowrap;
    flex-direction: row;
    margin-bottom: .25rem;

    .col {
        overflow: hidden;
        padding-left: 2px;
        padding-right: 2px;

        &:first-child {
            padding-left: 0;
        }

        &:last-child {
            padding-right: 0;
        }
    }

    .btn {
        @include truncate;
        background: $color-white;
        border: 1px solid $color-border;
        border-radius: $border-radius;
        box-shadow: none;
        font-size: $font-size-sm;
        font-weight: normal;
        padding: .75rem .25rem !important;
        opacity: .6;
        text-align: center;
        text-transform: none;
        width: 100%;

        &:hover {
            background: $color-white;
        }

        &.active {
            opacity: 1;
        }
    }
}

//
// Toggle
//
.custom-toggle {
    line-height: 1.5rem;
    margin: 0;
    padding: 0;
    padding-left: 50px;
    width: auto;

    &-label {
        margin-left: .5rem;
    }

    &-slider {
        width: 50px;

        &.checked {
            border-color: $color-success;

            &::before {
                background: $color-success;
                transform: translateX(1.625rem);
            }
        }

        &.unchecked {
            border-color: $color-error;

            &::before {
                background: $color-error;
                transform: translateX(0);
            }
        }

        &.indeterminate {
            &::before {
                transform: translateX(.8125rem);
            }
        }
    }

    &.disabled {
        opacity: .5;
        pointer-events: none;
    }
}

.slide-right {
    animation: slide-right .5s forwards;
    transform: translateX(100%);
}

@keyframes slide-right {
    100% {
        transform: translateX(0%);
    }
}

.slide-left {
    animation: slide-left .5s forwards;
    transform: translateX(-100%);
}

@keyframes slide-left {
    100% {
        transform: translateX(0%);
    }
}