$image-width: 161px;
$image-right-margin: 24px;

.Podcast {

    &-image {
        align-items: center;
        border-radius: 3px;
        display: flex;
        flex-direction: column;
        height: $image-width;
        justify-content: center;
        margin-right: $image-right-margin;
        text-align: center;
        width: $image-width;
    }

    &-description {
        font-size: 12px;
        margin-top: 15px;
    }

    &-title {
        font-size: 24px;
    }

    &-sub-title {

        .StoreIcon {
            margin-bottom: 5px;
        }
    }

    &-feed-type {
        color: var(--gray-500);
        font-weight: 300;
        font-size: 16px;
        padding-left: 10px;
    }

    &-category-and-feed-link {
        display: flex;
        justify-content: space-between;

        .Glyph {
            fill: var(--blue);
            position: relative;
            top: -2px;
        }
    }

    &-category {
        color: var(--gray-500);
        font-size: 14px;
    }

    &-info {
        color: var(--gray-900);
        flex: 1;
    }

    &-header {
        display: flex;
        margin-bottom: 40px;
    }

    &-filter {
        margin-bottom: 0;
        margin-right: 20px;
        width: 300px;
    }

    &-search-last-control {
        flex: 1;
    }

    &-status {
        margin-bottom: 0;
        width: 200px;
    }

    &-input {
        border-radius: 20px;
    }

    &-select {

        .Select-control {
            border-radius: 20px;
            height: 40px;
        }
    }

    &-list-episode-controls {
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;
    }

    &-create-first-episode {
        align-items: center;
        border: 1px solid var(--gray-100);
        display: flex;
        flex-direction: column;
        height: 400px;
        justify-content: center;
    }

    &-create-first-episode-text {
        color: var(--gray-500);
        font-size: 28px;
    }

    &-top-save-button {
        margin-right: 10px;
    }

    &-delete-button {
        margin-left: 20px;
    }

    &-empty-circle {
        @include circle(140px);

        margin-bottom: 30px;
        margin-top: 20px;
    }

    @include tabs(var(--blue), 18px);

    &-tab-number {
        font-weight: normal;
    }

    &-title-star {
        display: inline-block;
        margin-left: 10px;

        .Star {
            cursor: pointer;
            height: 16px;
            width: 16px;
        }
    }

    &-episode-title-row {
        display: flex;
        align-items: center;
    }

    &-episode-title {
        color: var(--blue);
        cursor: pointer;
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 43vw;
    }

    &-episode-number {
        color: var(--gray-500);
        font-size: 12px;
    }

    &-episode-sort-column {
        cursor: pointer;

        .Glyph {
            fill: var(--gray-500);
        }
    }

    &-ad-locations {
        color: var(--gray-800);
        display: flex;
        font-size: 12px;
    }

    &-ad-pre-circle {
        @include circle(20px, transparent, transparent, var(--purple));

        margin-right: 15px;
    }

    &-ad-mid-circle {
        @include circle(20px, transparent, transparent, var(--red));

        margin-right: 15px;
    }

    &-ad-post-circle {
        @include circle(20px, transparent, transparent, var(--yellow));
    }

    &-ad-empty {
        opacity: 0.5;
    }

    &-publish-date {
        color: var(--gray-700);
        font-size: 14px;
    }

    &-publish-date-future {
        color: var(--gray-500);
        font-size: 14px;
    }

    &-publish-time {
        color: var(--gray-500);
        font-size: 11px;
    }

    &-duration {
        color: var(--gray-700);
        font-size: 14px;
    }

    &-episode-title-header {
        width: 50%;
    }

    &-new-episode,
    &-new-feed {
        margin-left: 10px;
    }

    .table td {
        vertical-align: middle;
    }

    &-insights {
        margin-right: 20px;

        &-glyph-disabled {
            fill: var(--gray) !important;
        }
    }

    &-feed-link {
        position: relative;
        top: -2px;
    }

    &-episode-review {

        &-tag {
            align-items: center;
            background: #ffe7d8;
            border-radius: 10px;
            display: inline-flex !important;
            padding: 2px 10px 2px 5px;
            gap: 5px;

            .Glyph {
                fill: var(--orange);
            }
        }

        &-text {
            width: 56px;
            font-size: 12px;
        }
    }

    &-failed-episodes,
    &-failed-single-episodes {
        padding-left: 20px;

        &-feed-title,
        &-title {
            padding-top: 5px;
        }

        &-alert-title {
            white-space: nowrap;
            padding-top: 5px;
            width: 650px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        &-error-alert {
            margin-bottom: 20px !important;
            min-height: 140px !important;
        }

        &-message {
            margin-top: 10px;
        }
    }

    &-failed-episodes-action-modal {

        &-text {
            font-size: 18px;
            line-height: 24px;
        }

        .ReactModal {

            &-content {
                width: 450px;
                height: 160px;
            }

            &-header {
                border-bottom: none;
                padding: 15px 20px;
            }

            &-body {
                display: none;
            }

            &-close {
                display: none;
            }
        }
    }
}