/* vim: set ft=scss: */

[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: #000;
    --bs-primary-bg-subtle-dark: #000;
    --bs-body-bg: #000;
}

body {
    background-color: var(--bs-body-bg-blend-with-gradient);
    font-family: 'Rubik', sans-serif;

    --app-purple: #6f42c1;
    --app-orange: #ff6347;
    --app-cyan: #3498db;
    --app-indigo: #6610f2;
    --app-pink: #e83e8c;
    --app-brown: #8b4513;
}

button {
    touch-action: manipulation;
}

.text-purple { color: var(--app-purple) !important; }
.text-orange { color: var(--app-orange) !important; }
.text-cyan { color: var(--app-cyan) !important; }
.text-indigo { color: var(--app-indigo) !important; }
.text-pink { color: var(--app-pink) !important; }
.text-brown { color: var(--app-brown) !important; }

.btn-purple {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-purple);
  --bs-btn-border-color: var(--app-purple);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-purple);
  --bs-btn-hover-border-color: var(--app-purple);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-purple);
  --bs-btn-active-border-color: var(--app-purple);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-purple);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-purple);
  --bs-gradient: none;
}

.btn-outline-purple {
  --bs-btn-color: var(--app-purple);
  --bs-btn-border-color: var(--app-purple);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-purple);
  --bs-btn-hover-border-color: var(--app-purple);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-purple);
  --bs-btn-active-border-color: var(--app-purple);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-purple);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-purple);
  --bs-gradient: none;
}

.btn-orange {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-orange);
  --bs-btn-border-color: var(--app-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-orange);
  --bs-btn-hover-border-color: var(--app-orange);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-orange);
  --bs-btn-active-border-color: var(--app-orange);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-orange);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-orange);
  --bs-gradient: none;
}

.btn-outline-orange {
  --bs-btn-color: var(--app-orange);
  --bs-btn-border-color: var(--app-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-orange);
  --bs-btn-hover-border-color: var(--app-orange);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-orange);
  --bs-btn-active-border-color: var(--app-orange);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-orange);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-orange);
  --bs-gradient: none;
}

.btn-cyan {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-cyan);
  --bs-btn-border-color: var(--app-cyan);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-cyan);
  --bs-btn-hover-border-color: var(--app-cyan);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-cyan);
  --bs-btn-active-border-color: var(--app-cyan);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-cyan);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-cyan);
  --bs-gradient: none;
}

.btn-outline-cyan {
  --bs-btn-color: var(--app-cyan);
  --bs-btn-border-color: var(--app-cyan);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-cyan);
  --bs-btn-hover-border-color: var(--app-cyan);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-cyan);
  --bs-btn-active-border-color: var(--app-cyan);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-cyan);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-cyan);
  --bs-gradient: none;
}

.btn-outline-indigo {
  --bs-btn-color: var(--app-indigo);
  --bs-btn-border-color: var(--app-indigo);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-indigo);
  --bs-btn-hover-border-color: var(--app-indigo);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-indigo);
  --bs-btn-active-border-color: var(--app-indigo);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-indigo);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-indigo);
  --bs-gradient: none;
}

.btn-pink {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--app-pink);
  --bs-btn-border-color: var(--app-pink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-pink);
  --bs-btn-hover-border-color: var(--app-pink);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-pink);
  --bs-btn-active-border-color: var(--app-pink);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-pink);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-pink);
  --bs-gradient: none;
}

.btn-outline-pink {
  --bs-btn-color: var(--app-pink);
  --bs-btn-border-color: var(--app-pink);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-pink);
  --bs-btn-hover-border-color: var(--app-pink);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-pink);
  --bs-btn-active-border-color: var(--app-pink);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-pink);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-pink);
  --bs-gradient: none;
}

.btn-outline-brown {
  --bs-btn-color: var(--app-brown);
  --bs-btn-border-color: var(--app-brown);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--app-brown);
  --bs-btn-hover-border-color: var(--app-brown);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--app-brown);
  --bs-btn-active-border-color: var(--app-brown);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--app-brown);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--app-brown);
  --bs-gradient: none;
}

.flex-grow-1 {
    min-width: 0;
}

.navbar {
    font-weight: 700;
    font-family: Raleway, sans-serif;
}

.preview img {
    max-width: 100%;
    height: auto;
}

dt {
    color: var(--bs-secondary);
    text-transform: uppercase;
    font-size: 120%;
    font-family: Raleway, sans-serif;
}

.btn-group.cms {
    display: flex;
    align-items: center;
    background-color: var(--bs-secondary-bg-subtle);
    border-radius: var(--bs-border-radius);
    padding: .2rem .2rem;
    border: 1px solid var(--bs-secondary-bg-subtle);
    .btn {
        padding: .2rem .5rem;
    }
    .btn-group, .dropdown {
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0 .2rem;
        position: relative;
        flex: 1 1 auto;
        text-align: center;
    }
    .btn, .dropdown {
        border: 0;
        border-radius: var(--bs-border-radius) !important;
        --bs-text-opacity: 1;
        --bs-bg-opacity: 1;
        color: var(--bs-secondary-color);
        &:hover, &.active {
            background-color: var(--bs-body-bg) !important;
            .title { display: inline; }
        }
        .title { display: none; }
    }
}

.btn-secondary.cms {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-color);
    border: 1px solid var(--bs-body-bg);
    &:hover {
        border: 1px solid var(--bs-secondary);
        background-color: var(--bs-body-bg);
        color: var(--bs-secondary-color);
    }
    &.active {
        border: 1px solid var(--bs-body-bg) !important;
        background-color: var(--bs-secondary) !important;
        color: var(--bs-body-bg) !important;
    }
}

.btn-outline-secondary.cms {
    border-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-secondary-color);
    &:hover {
        background-color: var(--bs-body-bg);
        color: var(--bs-btn-color);
    }
    &.active {
        background-color: var(--bs-secondary) !important;
        color: var(--bs-body-bg) !important;
    }
}

.hover-bg-secondary-subtle.cms {
    a {
        text-decoration: none;
        color: inherit;
    }
    &:hover {
        background-color: var(--bs-secondary-bg-subtle);
    }
    &.active {
        background-color: var(--bs-secondary) !important;
        color: var(--bs-body-bg) !important;
    }
}

header .alert {
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.sortable {
    counter-reset: section;
    cursor: pointer;
    .handle {
        cursor: grab;
    }
    .counter {
        counter-increment: section;
        margin-right: .25rem;
        vertical-align: middle;
    }
    .counter::before {
        content: counter(section);
        font-size: 1.25rem;
        font-weight: 300;
    }
}

.hoverable {
    display: none;
}

.hoverator:hover .hoverable {
    display: block;
}

button[data-bs-toggle="collapse"]::before {
    font-family: bootstrap-icons;
    content: "\F229";
}

button[data-bs-toggle="collapse"].collapsed::before {
    font-family: bootstrap-icons;
    content: "\F231";
}

.bytes-too-high, .px-too-high {
    color: rgb(220, 53, 69);
    &::after {
        font-style: normal;
        font-family: bootstrap-icons;
        content: " \F333";
    }
}

textarea.form-control {
  min-height: 32rem;
  font-family: monospace;
  font-size: 90%;
}

/* Custom media queries */

/* sm */
@media (min-width: 576px) {
}

/* md */
@media (min-width: 768px) {
  .border-start-md-1 {
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .border-end-md-1 {
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
  }
  .rounded-bottom-start-md-1 {
    border-bottom-left-radius: var(--bs-border-radius-sm) !important;
  }
}

/* lg */
@media (min-width: 992px) {
}

/* xl */
@media (min-width: 1200px) {
}

/* xxl */
@media (min-width: 1400px) {
}
