.ons-input--upload {
    background: var(--ons-color-white);
    border: 1px solid var(--ons-color-input-border);
    border-radius: $input-radius;
    padding: 0;
    width: 100%;
    // custom line height to center the placeholder text
    line-height: 1.5rem;
    &::-webkit-file-upload-button {
        background: var(--ons-color-button-secondary);
        border: 0;
        border-bottom-right-radius: 0;
        border-right: 1px solid var(--ons-color-input-border);
        border-top-right-radius: 0;
        color: var(--ons-color-text);
        outline: none;
        padding: 0.5rem 1rem;
        transition: border-color 200ms ease-in;
    }
    &:hover {
        cursor: pointer;
        &::-webkit-file-upload-button {
            border-right-color: var(--ons-color-text-link-hover);
            cursor: pointer;
        }
    }

    @include mq(m) {
        width: 80%;
    }

    @include mq(l) {
        width: 70%;
    }
}