:host {
    ::ng-deep {
        [widget] {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            position: relative;
            background: #FFF;
            border: 0px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 5px 0px #ccc;
        }

        [widget-name] {
            height: 20px;
            width: 100%;
            padding-left: 2vw;
            font-size: 12px;
            display: flex;
            align-items: center;
            flex-grow: 0;
            flex-shrink: 0;
            color: #666;
            transition: height 0.3s;
        }

        [widget-content] {
            height: calc(100% - 20px);
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            flex-grow: 0;
            flex-shrink: 0;
        }
    }
}

.editMode {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;

    .key {
        text-shadow: 1px 1px 1px rgba(99, 99, 99, 0.8);
        font-size: 0.8em;
        color: white;
        position: absolute;
        top: 0;
        left: 0;
        padding: 2px 3px 2px 3px;
        background-color: rgba(70, 210, 253, 0.5);
    }

    .centerkey {
        text-align: center;
        width: 100%;
    }
}