.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-account {
    -webkit-mask-image: url('./icon/account.svg');
    mask-image: url('./icon/account.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');
}