@import '../../../ui/styles/variables.less';


app-elements-timezone-selector {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    p.timezone {
        display: flex;
        position: relative;
        flex-direction: row;
        padding: 6px 12px;
        font-size: 15px;
        color: var(--scheme-color-2);
        &:hover {
            background-color: var(--scheme-color-4);
        }
        & span.spacer {
            flex: auto;
            margin: 0 12px;
        }
        & span.utc{
            color: var(--scheme-color-0);
        }
        & span.name,
        & span.utc{
            & > span {
                background-color: var(--scheme-color-3);
                color: var(--scheme-color-0);
            }
        }
    }
    & div.filter {
        position: absolute;
        z-index: 1000;
        padding: 6px 12px;
        background: var(--scheme-color-warning-light);
        top: 6px;
        right: 6px;
        box-shadow: 3px 3px 3px rgb(0 0 0 / 40%);
        border-radius: 3px;
    }

}