.mask-field-group {
    position: relative;
    margin-bottom: 10px;

    &:hover {
        .mask-field-group {
            &__label {
                color: var(--mask-default-color);
            }
        }
    }

    &__label {
        font-size: 10px;
        position: absolute;
        right: 10px;
        bottom: 5px;
        color: var(--mask-field-group-color);
        pointer-events: none;
    }

    &__list {
        background-color: var(--mask-default-bg);
        padding: 10px;
        border: 1px solid var(--mask-border-color);
        list-style: none;
        margin: 0;

        > div {
            display: flex;
            flex-wrap: wrap;
        }

        li {
            background: var(--mask-default-bg);
            color: var(--mask-field-group-item-color);
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 1.2em;
            font-weight: 700;
            margin: 2px 3px;

            img {
                box-shadow: 1px 1px 1px 1px rgba(#000, 0.3);
            }

            &:hover {
                img {
                    filter: brightness(0.85);
                }
            }
        }
    }
}
