.playlistCreator {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;

    .inputField {
        display: inline-flex;
        flex-direction: row;

        align-self: start;
        align-items: center;
        justify-content: flex-start;

        width: 100%;

        margin-bottom: 20px;

        font-size: 2rem;

        color: var(--text-color);

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        span {
            color: var(--text-color);
        }

        .inputText {
            width: 100%;
            color: var(--text-color);
        }

        .coverUploader {
            width: 100px;
        }

        .coverPreview {
            height: 5vh;

            img {
                height: 100%;
                border-radius: 10px;
                margin-right: 10px;
            }

            svg {
                margin: 0 !important;
            }
        }
    }

    .files {
        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        border: 1px solid var(--border-color);
        border-radius: 8px;

        width: 100%;
        height: 100%;

        padding: 10px;
        margin-bottom: 20px;

        .uploader,
        .ant-upload {
            display: flex;
            flex-direction: column;

            align-items: center;
            justify-content: center;

            width: 100%;
        }

        .ant-upload-list,
        .ant-upload-list-picture-container {
            width: 100%;
        }

        .ant-upload-list-item-thumbnail {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .ant-upload-list-item {
            display: inline-flex;
            flex-direction: row;

            align-items: center;
            justify-content: space-between;

            width: 100%;
        }
    }

    .uploadHint {
        display: flex;
        flex-direction: column;

        align-self: center;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100%;

        svg {
            font-size: 3rem;
        }

        h3 {
            font-size: 1.5rem;
        }
    }

    .footer {
        position: relative;
        padding: 10px;
    }
}