/**
 * jQuery Timed Dialog Plugin style sheet
 * Author: Armino Popp, <devel@boioiong.com>
 */
@use "sass:color";

$dialog-bg-color: #fff;
$header-bg-color: #1055aa;
$header-text-color: #fff;
$btn-text-color: #fff;
$btn-bg-color: #555;

$default-padding: 10px;

$dialog-bg-color-dark: #333;
$header-bg-color-dark: #1a3b64;
$header-text-color-dark: #ddd;
$btn-text-color-dark: #fff;
$btn-bg-color-dark: #555;

.timed-dialog-overlay {
    background-color: rgba(155,155,155,0.8);
}

[type="button"],
[type="reset"],
[type="submit"],
button {
    appearance: button;
    -webkit-appearance: button;
    padding: 0;
}

.timed-dialog {
    font-size: 16px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;

    & * {
        font-size: 16px;
        font-family: sans-serif;
    }

    .header {
        display:flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;

        background-color: $header-bg-color;
        color: $header-text-color;
        padding: 5px 10px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .icon {
            display: flex;
            font-weight: bold;
            padding:0;
            align-content: center;
            align-items:center;
            justify-content: center;
            width:24px;
            height:24px;
            background-color: white;
            color:$header-bg-color;
            border-radius: 100%;
        }

        .title {
            font-size: 1.2rem;
            padding: 0 10px;
        }
    }

    .body {
        min-height: 100px;
        flex-direction: column;
    }

    .action {
        flex-direction: row;
    }

    .action,
    .body {
        display: flex;
        background-color: $dialog-bg-color;
        padding: $default-padding;
    }

    .btn {
        width: 100%;
        border: 0;
        padding: 10px;
        line-height: 16px;
        color: $btn-text-color;
        background-color: $btn-bg-color;
        margin-right: 10px;
        &:last-child {margin-right:0;}
        &.btn-primary {
            background-color: $header-bg-color !important;

            &:hover {
                background-color: color.adjust($header-bg-color, $lightness: 20%) !important;
            }
        }

        span.text {
            position:relative;
            width:100%;
            height:100%;
            z-index:10;
        }
        span.meter {
            position:absolute;
            z-index:9;
            left:0;
            top:0;
            height:100%;
            background-color:rgba(color.adjust($header-bg-color, $lightness: 20%), .7);
            &.hover {
                background-color:rgba(color.adjust($header-bg-color, $lightness: -20%), .7) !important;
            }
        }

        &.btn-close {
            display: flex;
            margin:0;
            padding:0;
            align-content: center;
            align-items:center;
            justify-content: center;
            width:24px;
            height:24px;
            background-color: transparent;
            color: $btn-text-color;
            border:2px solid $btn-text-color;
            border-radius: 100%;
            &:hover {
                background-color: rgba(color.adjust($header-bg-color, $lightness: 20%), .7) !important;
            }

        }

        &:hover {
            background-color: rgba(color.adjust($btn-bg-color, $lightness: 20%), 1);
            color: $btn-text-color;
        }
    }
}


@media only screen and (min-width: 40em) {

}

@media (prefers-color-scheme: dark) {
    .timed-dialog-overlay {
        background-color: rgba(55,55,55,0.8);
    }
    .timed-dialog {
        .action,
        .body {
            background-color: $dialog-bg-color-dark;
            color: $header-text-color-dark;
        }
        .header {
            background-color: $header-bg-color-dark;
            color: $header-text-color-dark;
            .icon {
                background-color: $header-text-color-dark;
                color: $header-bg-color-dark;
            }
        }
        .btn {
            color: $btn-text-color-dark;
            background-color: $btn-bg-color-dark;
            &.btn-primary {
                background-color: $header-bg-color-dark !important;
                &:hover {
                    background-color: color.adjust($header-bg-color-dark, $lightness: 20%) !important;
                }
            }

            span.meter {
                background-color:rgba(color.adjust($header-bg-color-dark, $lightness: 20%), .7);
                &.hover {
                    background-color:rgba(color.adjust($header-bg-color-dark, $lightness: -20%), .7) !important;
                }
            }

            &.btn-close {
                background-color: transparent;
                color: $btn-text-color-dark;
                border:2px solid $btn-text-color-dark;
                &:hover {
                    background-color: rgba(color.adjust($header-bg-color-dark, $lightness: 20%), .7) !important;
                }
            }

            &:hover {
                background-color: rgba(color.adjust($btn-bg-color-dark, $lightness: 20%), 1);
                color: $btn-text-color-dark;
            }
        }
    }
}