﻿:root {
    --bg-color: #fff;
    --text-color: #333;
    --btn-bg: #eee;
    --btn-text: #333
}

[ozSuiteTheme-data='dark'] {
    --bg-color: #1a1a1a;
    --text-color: #f0f0f0;
    --btn-bg: #333;
    --btn-text: #f0f0f0
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    transition: background-color .4s ease,color .4s ease
}

.ozbg-theme-container {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 2147483647 !important;
    padding: 5px;
    pointer-events: auto;
    isolation: isolate
}

.ozbg-floating-btn {
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    border: 1px solid rgba(128,128,128,.3);
    cursor: pointer;
    background-color: var(--btn-bg);
    color: var(--btn-text);
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2147483647 !important;
    transition: transform .2s ease,background-color .4s ease
}

    .ozbg-floating-btn:hover {
        transform: scale(1.1)
    }

.ozbg-theme-menu {
    position: absolute;
    bottom: 35px;
    right: 5px;
    background: var(--btn-bg);
    color: var(--btn-text);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    min-width: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
    border: 1px solid rgba(128,128,128,.2);
    z-index: 2147483647 !important;
    pointer-events: none
}

    .ozbg-theme-menu.ozbg-show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto
    }

.ozbg-menu-item {
    padding: 0.8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    white-space: nowrap;
    position: relative
}

    .ozbg-menu-item:hover {
        background-color: rgba(128,128,128,.2)
    }

.ozbg-sub-menu {
    position: absolute;
    right: 100%;
    bottom: 0;
    margin-right: 5px;
    background: var(--btn-bg);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    min-width: 40px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all .2s ease;
    border: 1px solid rgba(128,128,128,.2);
    z-index: 2147483647 !important
}

.ozbg-has-sub:hover .ozbg-sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0)
}

.ozbg-menu-item.active {
    background-color: rgba(128,128,128,.15);
    border-radius: 4px
}

#ozSuiteTheme-icon svg, .ozbg-menu-item svg {
    display: inline-block;
    stroke: currentColor;
    vertical-align: middle;
    width: 1.2em;
    height: 1.2em
}

input[type="image"] {
    color: currentColor
}
