.CustomThumbnail {
    &-header {
        color: $gorilla;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 5px;
        margin-top: 20px;
    }

    &-text {
        color: $gorilla;
        font-size: 14px;
        margin-bottom: 10px;
    }

    &-optional {
        color: $timberwolf;
        font-weight: normal;
    }

    &-upload-area {
        background-color: #fff;
        border: 2px dashed $koala;
        border-radius: 3px;
        height: 142px;
    }

    /* stylelint-disable declaration-no-important */
    &-upload-area[data-dragged=true] {
        border: 2px dashed $bluejay !important;
        border-radius: 3px !important;
        box-shadow: inset 0 0 50px 0 rgba(2, 110, 173, .1);
    }
    /* stylelint-enable declaration-no-important */

    &-upload-image {
        color: #026ead;
        cursor: pointer;
        font-size: 11px;
        font-weight: 500;
        margin-top: 8px;
    }

    /* stylelint-disable selector-no-id */
    #custom-thumbnail-upload {
        display: none;
    }
    /* stylelint-enable selector-no-id */

    &-upload-image .Upload-icon {
        margin-right: 5px;
        vertical-align: text-bottom;
    }

    &-upload-area .Picture-icon {
        margin: 50px 98px;
    }

    &-requirements-help {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .Icons-info {
        fill: $koala;
        margin: 0;
    }

    &-requirements {
        font-family: Rubik;
        font-size: 12px;
    }

    &-requirements-header {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    &-requirements-list {
        list-style: disc;
        margin-left: 14px;
    }

    &-upload-progress,
    &-upload-error {
        background: #fff;
        height: 142px;
        text-align: center;
    }

    &-uploading {
        color: $timberwolf;
        font-size: 10px;
        font-weight: 500;
        padding-top: 50px;
    }

    &-upload-progress-percentage {
        color: $bluefish;
        font-size: 20px;
    }

    &-upload-error,
    &-upload-area[data-error=true] {
        border: 1px solid $parrot;
        border-radius: 0;
    }

    &-upload-failed,
    &-validation-failed {
        color: $parrot;
        font-size: 10px;
        font-weight: 500;
        padding-top: 20px;
    }

    &-upload-failed .Icons-attention,
    &-validation-failed .Icons-attention {
        margin-right: 5px;
        vertical-align: bottom;
    }

    &-upload-retry {
        font-size: 12px;
        padding-top: 37px;
    }

    &-validation-errors {
        text-align: center;
    }

    &-validation-error-message:first-child {
        padding-top: 37px;
    }

    &-remove {
        text-align: right;
    }

    /* stylelint-disable declaration-no-important */
    &-remove-button {
        color: $parrot !important;
        padding: 5px 0 !important;
        text-decoration: none !important;
    }
    /* stylelint-enable declaration-no-important */

    &-remove-button .Icons-trash-can {
        fill: $parrot;
        margin-right: 5px;
        vertical-align: bottom;
    }

    &-custom-thumbnail {
        background: #000;
        height: 142px;
        object-fit: contain;
        width: 100%;
    }
}