@use '@/styles/base';

.card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    &.dragging {
        filter: opacity(0.5);
    }
}

.base-image-container {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: base.$border-radius-md;
}

.image-container {
    position: relative;
    display: flex;
    align-items: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: base.$border-radius-md;

    &::before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        user-select: none;
        content: '';
        background: linear-gradient(0deg, rgb(0 0 0 / 90%) 100%, rgb(0 0 0 / 0%) 100%);
        opacity: 0;
        transition: all 0.2s ease-in-out;
    }

    &:hover {
        // filter: blur(2px);

        &::before {
            opacity: 0.7;
        }
    }

    &:hover .card-controls {
        opacity: 1;
    }
}

.circle {
    border-radius: 50%;
}

.image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 0;
}

.description-container {
    display: flex;
    flex-direction: column;
    gap: base.$gap-xs;
    align-items: flex-start;
    padding-top: base.$gap-xs;
}

.description {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    font-size: base.$font-size-md;
    color: base.$font-color;
    transition: all 0.3s ease-in-out;

    @include base.text-ellipsis;
}

.description.underline {
    &:hover {
        text-decoration: underline;
    }
}

.description.secondary {
    color: base.$font-secondary-color;
}
