@use 'design-system' as *;

.container {
    display: flex;
    flex-direction: column;
    gap: $spacing-size-4;
}

.podcastContainer {
    border-radius: 8px;
    display: flex;
    gap: $spacing-size-8;
    color: var(--color-text-primary);
    cursor: pointer;

    @media screen and (max-width: $breakpoint-community-medium) {
        flex-direction: column;
        gap: $spacing-size-2;
        margin-bottom: $spacing-size-4;
    }
}

.podcastDetailsContainer {
    display: flex;
    flex-direction: column;
    margin-bottom: $spacing-size-8;
    gap: $spacing-size-2;
    font-weight: var(--text-regular);
}

.titleContainer {
    display: flex;
    justify-content: space-between;
}

.published {
    font-weight: var(--text-regular);
    color: color-mix(in srgb, var(--color-text-secondary), var(--color-bg-primary) 30%);
    display: flex;
    align-items: center;
}

.title {
    color: var(--color-fg-primary);
    font-size: var(--text-fs-lg);
    font-weight: var(--text-semibold);
    padding-right: $spacing-size-2;
}

.creditsContainer {
    margin-top: $spacing-size-1;
    color: color-mix(in srgb, var(--color-text-secondary), var(--color-bg-primary) 30%);

    span:not(:last-child)::after {
        content: ', ';
    }

    @media screen and (min-width: $breakpoint-community-medium) {
        display: flex;
        align-items: center;
        gap: $spacing-size-6;

        span:not(:last-child)::after {
            content: '|';
            display: inline-block;
            opacity: 0.66;
            transform: translate($spacing-size-3, -1px);
        }
    }
}

.podcastPlayerContainer {
    display: flex;
    justify-content: center;
    align-items: center;

    audio {
        mix-blend-mode: luminosity;
    }
}

.publicationLogo {
    width: 25px;
    height: auto;
    border-radius: 50%;
    margin-top: -2px;
    margin-right: $spacing-size-2;

    @media screen and (min-width: $breakpoint-community-medium) {
        margin-top: 0;
        margin-right: -$spacing-size-2;
    }
}
