@import "../core/grid.scss";

.os-grid {
    .os-grid-item {
        .os-icon {
            position: relative;
            height: calc(var(--os-cell-size) - var(--os-label-height) - var(--os-grid-item-padding) - 5px);

            img {
                max-width: 100%;
                height: 100%;
                display: block;
                margin: auto;
            }
        }

        .os-label {
            font-size: 11px;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 1);
        }

        &.os-selected, &:focus {
            .os-icon::before {
                width: 100%;
                max-width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                position: absolute;
                mask-image: var(--os-icon-url);
                mask-size: auto 100%;
                mask-repeat: no-repeat;
                mask-position: center;
                filter: opacity(.5);
                background-color: rgb(var(--os-primary-color));
                content: '';
           }

           .os-label {
                background-color: rgb(var(--os-primary-color));
                color: rgb(255, 255, 255);
                text-shadow: none;
           }
       }
    }
}
