superfile-input {
    &.superfile:not(.superfile-ready) {
        visibility: hidden;
    }

    &.superfile-drag input {
        background: palegoldenrod;
    }

    &.avatar {
        width: 100px;
        height: 100px;
        background: #ccc;
        border-radius: 100px;
        position: relative;
    }

    &.avatar.superfile-drag {
        background-color: palegoldenrod;
    }

    &.avatar .superfile-clear {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 24px;
        height: 24px;
        display: inline-flex;
        align-items: center;
        text-align: center;
        border: 0;
        background-color: #ddd;
        font-size: 10px;
        border-radius: 24px;
        z-index: 2;
    }

    &.avatar input {
        display: none;
    }

    &.avatar label {
        z-index: 1;
    }

    &.avatar.superfile-preview-active label {
        text-indent: -9999px;
    }

    &.avatar .superfile-preview {
        z-index: 0;
        border-radius: 500px;
    }

    &.avatar.superfile-drag .superfile-preview {
        display: none;
    }

    &.avatar label,
    &.avatar .superfile-preview {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    &.avatar label {
        display: inline-flex;
        align-items: center;
        text-align: center;
        max-width: 75%;
        left: 12.5%;
    }
}