.c-grid-item {
    position: relative;
    margin-bottom: calculateRem(16px);
    margin-right: calculateRem(16px);
    border-radius: $ibexa-border-radius;
    border: calculateRem(1px) solid transparent;
    cursor: pointer;

    &:hover {
        .c-toggle-selection-button {
            opacity: 1;
        }
    }

    &__name {
        width: calculateRem(180px);
        height: calculateRem(54px);
        padding: calculateRem(5px);
        color: $ibexa-color-font;
        font-size: calculateRem(16px);
        border-bottom-left-radius: $ibexa-border-radius;
        border-bottom-right-radius: $ibexa-border-radius;
        background: $ibexa-white;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    &__preview {
        width: calculateRem(180px);
        height: calculateRem(180px);
        background-color: rgba($ibexa-color-base, 0.23);
        border-top-left-radius: $ibexa-border-radius;
        border-top-right-radius: $ibexa-border-radius;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .c-toggle-selection-button {
        position: absolute;
        top: calculateRem(5px);
        right: calculateRem(5px);
        background: $ibexa-color-base-dark;

        &--selected {
            background-color: $ibexa-color-primary;
        }
    }

    &--marked {
        border: calculateRem(1px) solid $ibexa-color-primary;

        .c-grid-item {
            &__name {
                background-color: $ibexa-color-primary;
                color: $ibexa-white;
            }
        }
    }

    &--not-selectable {
        background-color: $ibexa-color-base-light;
        cursor: not-allowed;
    }

    .c-thumbnail {
        img {
            max-width: calculateRem(180px);
            max-height: calculateRem(180px);
        }
    }
}
