special-pages/pages/new-tab/app/favorites/components/Tile.module.css
.item {
    --icon-width: 4rem;

    display: block;
    position: relative;
    text-decoration: none;
    color: currentColor;
    outline: none;
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
    height: 96px;

    &:focus-visible .icon {
        box-shadow: var(--focus-ring);
    }
}

@keyframes pulse {
    0% { scale: 1 }
    50% { scale: 1.2 }
    100% { scale: 1 }
}

.icon {
    display: grid;
    align-content: center;
    justify-items: center;
    width: var(--icon-width);
    height: var(--icon-width);
    margin-bottom: 6px;
    border-radius: var(--border-radius-lg);
}

.preview {
    color: var(--ntp-text-normal);
    transform: scale(0.8);
    img {
        opacity: 0.8;
    }
}

.draggable {
    backdrop-filter: blur(48px);
    background: var(--ntp-surface-background-color);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12), 0px 0px 3px 0px rgba(0, 0, 0, 0.16);
    transition: transform .2s;

    &:hover {
        transform: scale(1.08)
    }

    [data-theme="dark"] & {
        border: 1px solid var(--color-white-at-9);
        &:hover {
            background: rgba(0, 0, 0, 0.24);
        }
    }

    [data-background-kind="userImage"] & {
        border: 1px solid var(--color-black-at-9);
        background: var(--color-white-at-30);

        &:hover {
            background: var(--color-white-at-18);
        }
    }

    [data-theme="dark"] [data-background-kind="userImage"] & {
        border: 1px solid var(--color-white-at-9);
        background: var(--color-black-at-18);

        &:hover {
            background: rgba(0, 0, 0, 0.24);
        }
    }

    &:active {
        transform: scale(0.95);
        opacity: .75;
    }
}

.text {
    width: var(--icon-width);
    text-align: center;
    font-size: calc(10 * var(--px-in-rem));
    line-height: calc(13 * var(--px-in-rem));
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.placeholder {
    background-color: transparent;
    border: 1.5px dashed var(--color-black-at-9);

    [data-theme=dark] & {
        border-color: var(--color-white-at-9);
    }
}

.plus {
    outline: none;
    border: none;
    color: var(--color-black-at-90);

    [data-theme=dark] & {
        color: var(--color-white-at-85);
    }

    &:focus-visible {
        box-shadow: var(--focus-ring);
    }
}

.dropper {
    width: 2px;
    height: 4rem;
    position: absolute;
    top: 0;
    background-color: var(--color-black-at-12);
    [data-theme=dark] & {
        background-color: var(--color-white-at-12);
    }
}

.dropper[data-edge="left"] {
    left: -1px;
}

.dropper[data-edge="right"] {
    right: -1px;
}

[data-item-state="idle"] {
    &:hover {
        border-color: #FFF;
    }
}

[data-item-state="dragging"] {
    opacity: 0.4;
}
