input[type="color"] {
    padding-right: 36px !important;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg width='28' height='32' viewBox='0 0 28 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_iiii_40_1601)'%3E%3Crect width='28' height='32' fill='%23C3C3C3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 12.5699H8V14.2842H20V12.5699ZM18.2857 14.2842H9.71429V15.9985H11.4286V17.7128H13.1429V19.4271H14.8571V17.7128H16.5714V15.9985H18.2857V14.2842Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_iiii_40_1601' x='0' y='0' width='28' height='32' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='4' dy='4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_40_1601'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-4' dy='-4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect1_innerShadow_40_1601' result='effect2_innerShadow_40_1601'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='2' dy='2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect2_innerShadow_40_1601' result='effect3_innerShadow_40_1601'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect3_innerShadow_40_1601' result='effect4_innerShadow_40_1601'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right 4px center;

    &:disabled,
    &.is-disabled {
        background-image: url("data:image/svg+xml,%3Csvg width='28' height='32' viewBox='0 0 28 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_iiii_40_2248)'%3E%3Crect width='28' height='32' fill='%23C3C3C3'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.71 14.2871H9.70999V16.0014H21.71V14.2871ZM19.9957 16.0014H11.4243V17.7157H13.1386V19.43H14.8528V21.1443H16.5671V19.43H18.2814V17.7157H19.9957V16.0014Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 12.5699H8V14.2842H20V12.5699ZM18.2857 14.2842H9.71429V15.9985H11.4286V17.7128H13.1429V19.4271H14.8571V17.7128H16.5714V15.9985H18.2857V14.2842Z' fill='%23808080'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_iiii_40_2248' x='0' y='0' width='28' height='32' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='4' dy='4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect1_innerShadow_40_2248'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-4' dy='-4'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 0 0.501961 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect1_innerShadow_40_2248' result='effect2_innerShadow_40_2248'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='2' dy='2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 0 0.870588 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect2_innerShadow_40_2248' result='effect3_innerShadow_40_2248'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='-2' dy='-2'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='effect3_innerShadow_40_2248' result='effect4_innerShadow_40_2248'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
        background-position: right 4px center;
        background-repeat: no-repeat;
    }
}