@import (once) "../../include/vars";

:root {
    --remark-border-radius: 6px;
    --remark-border-color: var(--border-color);
    --remark-background: #ffffff;
    --remark-color: #191919;
}

.dark-side {
    --remark-border-color: var(--border-color);
    --remark-background: #26282e;
    --remark-color: #dbdfe7;
}

.remark {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: relative;
    border: 1px solid;
    border-left: 4px solid;
    border-color: var(--remark-border-color);
    border-radius: var(--remark-border-radius);
    color: var(--remark-color);
    background: var(--remark-background);
    padding: 1rem 2rem 1rem 1rem;
    font-size: 14px;
    margin: 1rem 0;
    cursor: default;
    overflow: hidden;

    .icon {
        margin-right: 1rem;
        font-size: 32px;
        width: 32px;
        height: 32px;
        position: absolute;
        top: 10px;
        left: 10px;
        object-fit: cover;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    &::before {
        font-family: serif;
        content: "”";
        position: absolute;
        top: -10px;
        right: 10px;
        font-size: 48px;
        font-feature-settings: 'onum';
        font-variant-numeric: oldstyle-nums;
    }
}

.remark:has(.icon) {
    min-height: 40px;
    padding-left: 50px;
    padding-right: 50px;
}

.remark {
    each(@normalColors, {
        @bg: "light-@{value}";
        @bd: "@{value}";

        &.@{value} {
            border-color: @@bd;
            color: #191919;
            background: @@bg;

            .icon {
                color: @@bd;
            }
            
            &::before {
                color: @@bd;
            }
        }
    });
    
    &.alert, &.error {
        border-color: var(--color-red);
        background: var(--color-light-red)!important;
        color: #191919!important;

        .icon, &::before {
            color: var(--color-red);
        }
    }
    
    &.warning, &.caution {
        border-color: var(--color-orange);
        background: var(--color-light-orange)!important;
        color: #191919!important;

        .icon, &::before {
            color: var(--color-orange);
        }
    }
    
    &.info {
        border-color: var(--color-blue);
        background: var(--color-light-blue)!important;
        color: #191919!important;

        .icon, &::before {
            color: var(--color-blue);
        }
    }
    
    &.success {
        border-color: var(--color-green);
        background: var(--color-light-green)!important;
        color: #191919!important;

        .icon, &::before {
            color: var(--color-green);
        }
    }
    
    &.dark {
        border-color: var(--color-dark);
        background: #dddddd !important;
        color: #191919!important;

        .icon {
            color: var(--color-dark);
        }
    }
}