.ic {
    display: inline-block;
    vertical-align: middle;
    
    background-color: var(--txt); 
    
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    transition: background-color 0.3s ease;
}

.ic-gray { background-color: var(--gray); }
.ic-red  { background-color: var(--red); }
.ic-white { background-color: #fff; }

.ic-paste       { -webkit-mask-image: url('./icon/paste.svg'); mask-image: url('./icon/paste.svg'); }
.ic-clipboard   { -webkit-mask-image: url('./icon/clipboard.svg'); mask-image: url('./icon/clipboard.svg'); }
.ic-image       { -webkit-mask-image: url('./icon/image.svg'); mask-image: url('./icon/image.svg'); }
.ic-config    { -webkit-mask-image: url('./icon/config.svg'); mask-image: url('./icon/config.svg'); }
.ic-share       { -webkit-mask-image: url('./icon/share.svg'); mask-image: url('./icon/share.svg'); }
.ic-load        { -webkit-mask-image: url('./icon/load.svg'); mask-image: url('./icon/load.svg'); }
.ic-loader      { -webkit-mask-image: url('./icon/loader.svg'); mask-image: url('./icon/loader.svg'); }
.ic-new         { -webkit-mask-image: url('./icon/new.svg'); mask-image: url('./icon/new.svg'); }
.ic-summary     { -webkit-mask-image: url('./icon/summary.svg'); mask-image: url('./icon/summary.svg'); }
.ic-search     { -webkit-mask-image: url('./icon/search.svg'); mask-image: url('./icon/search.svg'); }
.ic-history     { -webkit-mask-image: url('./icon/history.svg'); mask-image: url('./icon/history.svg'); }
.ic-location     { -webkit-mask-image: url('./icon/location.svg'); mask-image: url('./icon/location.svg'); }

.ic-arrow-line-left  { -webkit-mask-image: url('./icon/arrow-line-left.svg'); mask-image: url('./icon/arrow-line-left.svg'); }
.ic-arrow-line-right { -webkit-mask-image: url('./icon/arrow-line-right.svg'); mask-image: url('./icon/arrow-line-right.svg'); }
.ic-arw-both    { -webkit-mask-image: url('./icon/arw-both.svg'); mask-image: url('./icon/arw-both.svg'); }
.ic-arw-up      { -webkit-mask-image: url('./icon/arw-up.svg'); mask-image: url('./icon/arw-up.svg'); }
.ic-arw         { -webkit-mask-image: url('./icon/arw.svg'); mask-image: url('./icon/arw.svg'); }
.ic-autofill    { -webkit-mask-image: url('./icon/autofill.svg'); mask-image: url('./icon/autofill.svg'); }
.ic-maximize    { -webkit-mask-image: url('./icon/maximize.svg'); mask-image: url('./icon/maximize.svg'); }
.ic-minimize    { -webkit-mask-image: url('./icon/minimize.svg'); mask-image: url('./icon/minimize.svg'); }

.ic-marubi           { -webkit-mask-image: url('./icon/marubi.svg'); mask-image: url('./icon/marubi.svg'); }
.ic-marubi-cat       { -webkit-mask-image: url('./icon/marubi-cat.svg'); mask-image: url('./icon/marubi-cat.svg'); }
.ic-marubi-cat-white { -webkit-mask-image: url('./icon/marubi-cat-white.svg'); mask-image: url('./icon/marubi-cat-white.svg'); }
.ic-pathly-with-cat  { -webkit-mask-image: url('./icon/pathly-with-cat.svg'); mask-image: url('./icon/pathly-with-cat.svg'); }