styles/themes.scss
@import './layout.scss';

/* Highlights */
// Custom
.send-button-custom {
    @extend .send-button;
    background-color: $color-highlight-custom;
    color: $color-txt-light;
}

.highlight-custom {
    z-index: 98;
    color: $color-txt-custom;
    background-color: $color-highlight-custom;
    box-shadow: 0 0 5px $color-light-shadow;
}

.hoverable-custom:hover {
    @extend .hoverable;
    color: $color-txt-custom;
    background-color: $color-highlight-custom;
}

.timeline-img-custom {
    @extend .timeline-img;
    border-color: $color-highlight-custom;
}

.cross-custom {
    @extend .cross;
}

.cross-custom:before, .cross-custom:after {
    background-color: $color-txt-custom;
}

// Pink
.send-button-pink {
    @extend .send-button;
    background-color: $color-highlight-pink;
    color: $color-txt-light;
}

.highlight-pink {
    z-index: 98;
    color: $color-txt-light;
    background-color: $color-highlight-pink;
    box-shadow: 0 0 5px $color-light-shadow;
}

.hoverable-pink:hover {
    @extend .hoverable;
    color: $color-txt-light;
    background-color: $color-highlight-pink;
}

.timeline-img-pink {
    @extend .timeline-img;
    border-color: $color-highlight-pink;
}

.cross-pink {
    @extend .cross;
}

.cross-pink:before, .cross-pink:after {
    background-color: $color-txt-light;
}

// Green
.send-button-green {
    @extend .send-button;
    background-color: $color-highlight-green;
    color: $color-txt-dark;
}

.highlight-green {
    z-index: 98;
    color: $color-txt-dark;
    background-color: $color-highlight-green;
    box-shadow: 0 0 5px $color-light-shadow;
}

.hoverable-green:hover {
    @extend .hoverable;
    color: $color-txt-dark;
    background-color: $color-highlight-green;
}

.timeline-img-green {
    @extend .timeline-img;
    border-color: $color-highlight-green;
}

.cross-green {
    @extend .cross;
}

.cross-green:before, .cross-green:after {
    background-color: $color-txt-dark;
}

/* Themes */
// Dark
.bg-primary-dark {
    color: $color-txt-light;
    background-color: $color-primary-dark;
}

.bg-secondary-dark {
    color: $color-txt-light;
    background-color: $color-secondary-dark;
}

.scrollable-dark {
    @extend .scrollable;
}

.scrollable-dark::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: $color-scrollbar-dark;
}

.scrollable-dark::-webkit-scrollbar-thumb:hover {
    background-color: $color-scrollbar-hover-dark;
}

.loader-dark {
    @extend .loader;
    border-top: 4px solid $color-secondary-light;
    border-left: 4px solid $color-secondary-light;
}

.modal-content-dark {
    @extend .modal-content;
    background-color: $color-primary-dark;
}

.msg-body-dark {
    @extend .msg-body;
    background-color: $color-primary-dark;
}

.msg-body-dark:hover {
    background-color: $color-secondary-dark;
}

.msg-tool-dark {
    @extend .msg-tool;
    background-color: $color-primary-dark;
}

.msg-tool-dark:hover {
    background-color: $color-secondary-dark;
}

.ico-dark {
    filter: invert(80%);
}

// Light
.bg-primary-light {
    color: $color-txt-dark;
    background-color: $color-primary-light;
}

.bg-secondary-light {
    color: $color-txt-dark;
    background-color: $color-secondary-light;
}

.scrollable-light {
    @extend .scrollable;
}

.scrollable-light::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: $color-scrollbar-light;
}

.scrollable-light::-webkit-scrollbar-thumb:hover {
    background-color: $color-scrollbar-hover-light;
}

.loader-light {
    @extend .loader;
    border-top: 4px solid $color-secondary-dark;
    border-left: 4px solid $color-secondary-dark;
}

.modal-content-light {
    @extend .modal-content;
    background-color: $color-primary-light;
}

.msg-body-light {
    @extend .msg-body;
    background-color: $color-primary-light;
}

.msg-body-light:hover {
    background-color: $color-secondary-light;
}

.msg-tool-light {
    @extend .msg-tool;
    background-color: $color-primary-light;
}

.msg-tool-light:hover {
    background-color: $color-secondary-light;
}

.ico-light {
    filter: invert(30%);
}

/* ||| Text styles */
.text-muted {
    color: $color-txt-muted;
}