.alive-podcast-card {
    position: relative;

    height: 60px;

    min-width: 300px;

    border-radius: 100vw;
    background: var(--alive-audio-player-background);
}

.alive-podcast-card .alive-card-button
{
    aspect-ratio: 1;
    border-radius: 100vw;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px;
    cursor: pointer;

    box-shadow: 0px 0px 1px 1px var(--alive-audio-player-buttons-border-normal);

    transition: 0.3s all ease-out;
}

.alive-podcast-card .alive-card-button:hover
{
    box-shadow: 0px 0px 3px 3px var(--alive-audio-player-buttons-border-hover);

    transition: 0.3s all ease-out;
}

.alive-card-icon-button
{
    display: flex;
    align-items: center;
    cursor: pointer;
    background: var(--alive-audio-player-icon-buttons-background-normal);
    transition: 0.1s all ease-out;
}

.alive-card-icon-button:hover
{
    background: var(--alive-audio-player-icon-buttons-background-hover);
    transition: 0.1s all ease-out;
}

.alive-card-layer
{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    left: 0px;
    display: flex;
    align-items: center;
}

.alive-card-progress
{
    border-radius: 100vw;
    overflow: hidden;
}

.alive-card-progress .alive-card-progress-bar
{
    height: 100%;
    background: var(--alive-audio-player-progress-background);
    opacity: 0.2;
    transition: 0.1s all ease-out;
}

.alive-card-select-time
{
    position: relative;
    width: 100%;
    cursor: pointer;
    border-radius: 100vw;
    overflow: hidden;
}

.alive-card-select-time .alive-card-select-time-preview
{
    width: 50%;
    height: 100%;
    background: var(--alive-audio-player-select-time-preview-background);
    opacity: 0;
    transition: 0.1s opacity ease-out;
}

@media (max-device-width: 400px)
{
    .alive-card-select-time.select-slide-active .alive-card-select-time-preview
    {
        opacity: 0.2;
        transition: 0.1s opacity ease-out;
    }
}

@media (min-device-width: 400px)
{
    .alive-card-select-time:hover .alive-card-select-time-preview
    {
        opacity: 0.2;
        transition: 0.1s opacity ease-out;
    }
}

.alive-card-content 
{
    width: 100%;
    pointer-events: none;

    box-sizing: border-box;
    padding: 8px;
    gap: 8px;
}

.alive-podcast-card:not(:has(.select-slide-active)) button
{
    pointer-events: auto;
}

.alive-card-content .alive-podcast-card-space
{
    flex: 1;
}

.alive-card-content .alive-card-title
{
    color: var(--alive-audio-player-title-color);
    text-overflow: ellipsis;
    text-wrap: nowrap;
}

.alive-card-share-section
{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;

    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    box-sizing: border-box;
    padding: 8px;
    gap: 8px;

    height: 60px;

    overflow: hidden;
    max-width: 60px;
    transition: 0.6s all ease-out;

    border-radius: 100vw;
}

.alive-card-share-section:hover
{
    background: var(--alive-audio-player-share-div-background);
    height: 100%;
    max-width: 100%;
    transition: 0.6s all ease-out;
    pointer-events: auto;
    box-shadow: 0px 0px 1px 1px var(--alive-audio-player-share-div-border);
}

.alive-card-share-section .alive-card-button
{
    width: 44px;
    box-sizing: border-box;
}

.alive-card-share-content {
    position: relative;

    display: flex;
    flex-direction: row;
    gap: 5px;

    padding: 4px;
    box-sizing: border-box;
}

.alive-card-share-content .alive-card-icon-button
{
    height: 100%;
    border: 0px;

    box-sizing: border-box;
    flex-direction: row;
    gap: 10px;
    padding: 10px;

    border-radius: 100vw;

    text-wrap: nowrap;
}