:root {
    --sc-color: #a53c6e;
    --sc-color-dark: #833057;
    --sc-color-light: #a53c6e66;
    --sc-color-bg: #f3e8ed;
    --sc-gray: #888;
    --app-border-color: #e9e9e9;
    --app-border-radius: .36em;
    --sc-color-blue: #2daad2;
    --app-header-height: 90px;
}
html {
    height: 100%;
}

body {
    background-color: white;
    height: 100%;
}

/** colors */
.color-gray { color: #999; }
.color-favorite { color: #ffd000; text-shadow: 0 0 1px black; }
.color-sc { color: var(--sc-color); }
.color-red { color: red; }
.text-marker {
    border-radius: 0.8em 0.3em;
    background: transparent linear-gradient(to right, rgba(234, 255, 78, .1), rgba(234, 255, 78, 0.7) 4%, rgba(234, 255, 78, .3));
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.app-link {
    color: var(--sc-color-blue);
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}
.app-image-border {
    border: 1px solid #efefef;
    border-radius: 6px;
}

/** text, common */
.text-cut {
    --max-lines: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-lines);
    -webkit-box-orient: vertical;
}
.text-right { text-align:right; }
.select-none { user-select: none; }
.link-unstyled, .link-unstyled:link, .link-unstyled:hover {
    color: inherit;
    text-decoration: inherit;
}
.word-break { word-break: break-word; }

.text-pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}
.text-italic {
    font-style: italic;
}

.text-nowrap {
    white-space: nowrap;
}

.d-transition {
    display: none;
    opacity: 0;
    transition: opacity .2s ease, display .2s ease allow-discrete;
    &._show {
        opacity: 1;
        display: block;
    }
}
@starting-style {
    .d-transition._show {
        opacity: 0;
    }
}

.app-hover-opacity {
    opacity: .82;
    transition: opacity .2s ease;
    &:hover {
        opacity: 1 !important;
    }
}

[x-cloak] {visibility: hidden;}
.pointer {cursor: pointer;}
.cursor-default {cursor: default;}
.pointer-none {pointer-events: none;}
.absolute-inset {
    position: absolute;
    inset: 0;
    z-index: 9;
}

.app-thumbnail-cover {
    object-fit: cover;
    width: 100%;
    aspect-ratio: 4/3;
}

/* layout */
.app-header {
    height: var(--app-header-height);
}
.app-main {
    background: #fbfbfb;
    position: relative;
}

.app-footer {
    background: #eaebeb;
    color: #999;
    position: relative;
}

/** boxes */
.app-box, .app-box-outline, .app-box-primary {
    border: 1px solid var(--app-border-color);
    border-radius: var(--app-border-radius);
    background: white;
}
.app-box-outline {
    background: transparent;
}
.app-shadow-sm {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .1);
}

/* forms */
.app-input-active-resize {
    --size-from: 150px;
    --size-to: 220px;
    transition: width 120ms ease;

    &:has(input) {
        width: var(--size-to);
    }
    &:has(input:placeholder-shown) {
        width: var(--size-from) !important;
    }
    &:has(input:focus) {
        width: var(--size-to) !important;
    }
}

.app-border-radius {
    border-width: 1px;
    border-style: solid;
    border-color: var(--app-border-color);
    border-radius: var(--app-border-radius);
    overflow: hidden;
}

.resize-none {resize: none !important;}

/* spacings/borders */
.left-0 {left: 0;}
.right-0 {right: 0;}
.border-left {border-left: 1px solid var(--bs-border-color);}
.border-right {border-right: 1px solid var(--bs-border-color);}

/** test
@media (max-width: 575px) {body { border: 15px solid red; }}
@media (min-width: 576px) {body { border: 15px solid orange; }}
@media (min-width: 768px) {body { border: 15px solid greenyellow; }}
@media (min-width: 992px) {body { border: 15px solid deepskyblue; }}
@media (min-width: 1200px) {body { border: 15px solid darkcyan; }}
@media (min-width: 1400px) {body { border: 15px solid blueviolet; }}
*/