.icon {
    width: var(--icon-width, 1em);
    height: var(--icon-width, 1em);
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mask-image: var(--background-svg);
    -webkit-mask-image: var(--background-svg);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position-x: center;
    mask-position-x: center;

    -webkit-mask-position-y: center;
    mask-position-y: center;

    -webkit-mask-size: contain;
    mask-size: contain;

}
.btn .icon{
    transform: translateY(18%);
}
.icon-area {
    --background-svg: url("data:image/svg+xml,%3Csvg  viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.536752 0.414726C0.845389 0.13705 1.26185 -0.0239951 1.71411 0.00247769L3.04546 0.0811986C3.28875 0.095586 3.4741 0.304687 3.45978 0.548C3.44529 0.791196 3.23623 0.976622 2.99298 0.96232L1.66232 0.88429C1.61224 0.881368 1.56288 0.883783 1.51524 0.890504L5.77652 5.15179L10.0371 0.891195C9.98949 0.88448 9.9401 0.882058 9.89003 0.88498L8.55868 0.963701C8.31548 0.977837 8.10621 0.79123 8.09188 0.548C8.0779 0.304986 8.26388 0.096366 8.50689 0.0818891L9.83755 0.00385876C10.2899 -0.0227629 10.7062 0.138438 11.0149 0.416108C11.0383 0.431829 11.0612 0.449963 11.0819 0.47066C11.1026 0.491406 11.1207 0.514169 11.1364 0.537642C11.4141 0.846353 11.5746 1.26193 11.548 1.71431L11.4707 3.04566C11.4562 3.28882 11.247 3.47416 11.0039 3.45998C10.7608 3.44552 10.5747 3.23699 10.5889 2.99387L10.6676 1.66252C10.6705 1.61236 10.6681 1.56315 10.6614 1.51544L6.40491 5.77189L10.6683 10.0352C10.675 9.98754 10.6774 9.93831 10.6745 9.88816L10.5958 8.55681C10.5815 8.31349 10.7675 8.10508 11.0108 8.0907C11.2541 8.0764 11.4633 8.26167 11.4776 8.50502L11.5556 9.83568C11.5822 10.2881 11.4211 10.7043 11.1434 11.013C11.1276 11.0365 11.1096 11.0593 11.0888 11.08C11.068 11.1008 11.0454 11.1188 11.0218 11.1346C10.7131 11.4123 10.2969 11.5734 9.84446 11.5468L8.5138 11.4688C8.27047 11.4545 8.08521 11.2453 8.09948 11.002C8.1138 10.7587 8.32225 10.5727 8.56559 10.587L9.89694 10.6657C9.94709 10.6686 9.99631 10.6662 10.044 10.6595L5.77998 6.39544L1.52007 10.6553C1.56779 10.6621 1.617 10.6645 1.66716 10.6616L2.99851 10.5828C3.24174 10.5687 3.45031 10.7546 3.46462 10.9978C3.47884 11.2411 3.2935 11.4502 3.0503 11.4647L1.71964 11.5427C1.26725 11.5693 0.850988 11.4081 0.542276 11.1304C0.518765 11.1147 0.496073 11.0966 0.475294 11.0759C0.454538 11.0551 0.436499 11.0324 0.420742 11.0089C0.143007 10.7002 -0.0181192 10.2839 0.00849329 9.83154L0.0865236 8.50088C0.100846 8.25752 0.309962 8.07225 0.553325 8.08656C0.796578 8.10097 0.98264 8.30938 0.968335 8.55267L0.889615 9.88402C0.886681 9.93419 0.889084 9.98337 0.895829 10.0311L5.15159 5.77534L0.890996 1.51475C0.884271 1.56246 0.881834 1.61168 0.884781 1.66183L0.962811 2.99249C0.977088 3.23574 0.791704 3.44483 0.548491 3.45929C0.305327 3.47343 0.0960865 3.28813 0.0816899 3.04497L0.00296902 1.71362C-0.0235858 1.26134 0.137595 0.844945 0.415218 0.53626C0.430933 0.512831 0.44977 0.49068 0.470461 0.469969C0.491159 0.449272 0.513338 0.430456 0.536752 0.414726Z' fill='%23202020'/%3E%3C/svg%3E%0A");
}

.icon-eye {
    --background-svg: url("data:image/svg+xml,%3Csvg  viewBox='0 0 18 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 5.88785C18 5.85981 18 5.83178 18 5.80374C18 5.7757 17.9701 5.74766 17.9701 5.71963C17.9701 5.69159 17.9401 5.66355 17.9401 5.63551C17.9401 5.60748 17.9102 5.57944 17.9102 5.57944C17.8802 5.5514 17.8802 5.52336 17.8503 5.49533C17.8503 5.49533 17.8503 5.49533 17.8503 5.46729C15.1248 1.85047 12.1597 0 8.98503 0C5.81032 0 2.87521 1.85047 0.14975 5.49533C0.14975 5.49533 0.14975 5.49533 0.14975 5.52337C0.1198 5.5514 0.1198 5.57944 0.0898503 5.60748C0.0898503 5.63551 0.0599002 5.63551 0.0599002 5.66355C0.0599002 5.69159 0.0299501 5.71963 0.0299501 5.74766C0.0299501 5.7757 0 5.80374 0 5.83178C0 5.85981 0 5.88785 0 5.91589C0 5.94393 0 5.97196 0 6C0 6.02804 0 6.05607 0 6.08411C0 6.11215 0 6.14019 0 6.16822C0 6.19626 0.0299501 6.2243 0.0299501 6.25234C0.0299501 6.28037 0.0599002 6.30841 0.0599002 6.33645C0.0599002 6.36449 0.0898503 6.39252 0.0898503 6.39252C0.1198 6.42056 0.1198 6.4486 0.14975 6.47664C0.14975 6.47664 0.14975 6.47664 0.14975 6.50467C2.84526 10.1495 5.84027 12 8.98503 12C12.1298 12 15.1248 10.0935 17.8203 6.4486C17.8203 6.4486 17.8203 6.4486 17.8203 6.42056C17.8503 6.39252 17.8503 6.36449 17.8802 6.33645C17.8802 6.30841 17.9102 6.30841 17.9102 6.28037C17.9102 6.25234 17.9401 6.2243 17.9401 6.19626C17.9401 6.16822 17.9701 6.14019 17.9701 6.11215C17.9701 6.08411 17.9701 6.05607 17.9701 6.02804C17.9701 6 17.9701 5.97196 17.9701 5.94393C18 5.94393 18 5.91589 18 5.88785ZM8.98503 8.60748C7.42762 8.60748 6.16972 7.42991 6.16972 5.97196C6.16972 4.51402 7.42762 3.33645 8.98503 3.33645C10.5424 3.33645 11.8003 4.51402 11.8003 5.97196C11.8003 7.42991 10.5424 8.60748 8.98503 8.60748Z' fill='%23202020'/%3E%3C/svg%3E%0A");

}

.icon-calendar {
    --background-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2012 0C10.5325 2.21385e-05 10.8008 0.268252 10.8008 0.599609V1.19727C12.9076 1.61778 14.4959 3.47671 14.4961 5.70703V11.376C14.4961 13.9164 12.4359 15.9764 9.89551 15.9766H4.59961C2.0591 15.9766 0 13.9165 0 11.376V5.70703C0.000227083 3.47647 1.58738 1.61654 3.69434 1.19629V0.599609C3.69434 0.268239 3.96257 1.67638e-08 4.29395 0C4.62514 0.000206882 4.89355 0.268366 4.89355 0.599609V1.10742H9.60156V0.599609C9.60156 0.268239 9.8698 0 10.2012 0ZM1.19922 11.376C1.19922 13.2537 2.72184 14.7764 4.59961 14.7764H9.89551C11.7732 14.7762 13.2959 13.2537 13.2959 11.376V6.37012H1.19922V11.376ZM4.29199 9.46289C4.70001 9.46291 5.03123 9.79404 5.03125 10.2021C5.03125 10.6103 4.70002 10.9414 4.29199 10.9414C3.88395 10.9414 3.55273 10.6103 3.55273 10.2021C3.55276 9.79403 3.88396 9.46289 4.29199 9.46289ZM7.24805 9.46289C7.65593 9.46306 7.98631 9.79413 7.98633 10.2021C7.98633 10.6102 7.65595 10.9412 7.24805 10.9414C6.84 10.9414 6.50879 10.6103 6.50879 10.2021C6.50881 9.79403 6.84002 9.46289 7.24805 9.46289ZM10.2012 9.46289C10.6092 9.46289 10.9404 9.79403 10.9404 10.2021C10.9404 10.6103 10.6092 10.9414 10.2012 10.9414C9.79328 10.9412 9.46289 10.6102 9.46289 10.2021C9.46291 9.79414 9.7933 9.46308 10.2012 9.46289ZM4.89355 2.81641C4.89341 3.14753 4.62505 3.41678 4.29395 3.41699C3.96266 3.41699 3.69448 3.14765 3.69434 2.81641V2.42969C2.42378 2.77979 1.45098 3.84811 1.24121 5.1709H13.2539C13.0442 3.84824 12.0711 2.77994 10.8008 2.42969V2.81641C10.8006 3.14764 10.5324 3.41697 10.2012 3.41699C9.86989 3.41699 9.60171 3.14765 9.60156 2.81641V2.30664H4.89355V2.81641Z' fill='currentColor'/%3E%3C/svg%3E");
}

.icon-people {
    --background-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.1429 4.11111H10.5429C10.5429 5.49223 9.41014 6.62222 8 6.62222V7.22222V7.82222C10.0614 7.82222 11.7429 6.16643 11.7429 4.11111H11.1429ZM8 7.22222V6.62222C6.58986 6.62222 5.45714 5.49223 5.45714 4.11111H4.85714H4.25714C4.25714 6.16643 5.93863 7.82222 8 7.82222V7.22222ZM4.85714 4.11111H5.45714C5.45714 2.72999 6.58986 1.6 8 1.6V1V0.4C5.93863 0.4 4.25714 2.05579 4.25714 4.11111H4.85714ZM8 1V1.6C9.41014 1.6 10.5429 2.72999 10.5429 4.11111H11.1429H11.7429C11.7429 2.05579 10.0614 0.4 8 0.4V1ZM13.5 12.2778H12.9C12.9 12.6766 12.5567 13.2028 11.6229 13.6649C10.7268 14.1085 9.44667 14.4 8 14.4V15V15.6C9.59089 15.6 11.0608 15.2821 12.1552 14.7404C13.212 14.2174 14.1 13.3824 14.1 12.2778H13.5ZM8 15V14.4C6.55333 14.4 5.27323 14.1085 4.37707 13.6649C3.44325 13.2028 3.1 12.6766 3.1 12.2778H2.5H1.9C1.9 13.3824 2.78796 14.2174 3.84476 14.7404C4.9392 15.2821 6.40911 15.6 8 15.6V15ZM2.5 12.2778H3.1C3.1 11.879 3.44325 11.3528 4.37707 10.8906C5.27323 10.4471 6.55333 10.1556 8 10.1556V9.55556V8.95556C6.40911 8.95556 4.9392 9.27345 3.84476 9.81514C2.78796 10.3382 1.9 11.1732 1.9 12.2778H2.5ZM8 9.55556V10.1556C9.44667 10.1556 10.7268 10.4471 11.6229 10.8906C12.5567 11.3528 12.9 11.879 12.9 12.2778H13.5H14.1C14.1 11.1732 13.212 10.3382 12.1552 9.81514C11.0608 9.27345 9.59089 8.95556 8 8.95556V9.55556Z' fill='currentColor'/%3E%3C/svg%3E%0A");
}

.icon-location {
    --background-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 17 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 8.5C16.5 12.9183 11.5 18.5 8.5 18.5C5.5 18.5 0.5 12.9183 0.5 8.5C0.5 4.08172 4.08172 0.5 8.5 0.5C12.9183 0.5 16.5 4.08172 16.5 8.5Z' stroke='%23202020'/%3E%3Cpath d='M11.1667 8.6C11.1667 10.0912 9.97276 11.3 8.5 11.3C7.02724 11.3 5.83333 10.0912 5.83333 8.6C5.83333 7.10883 7.02724 5.9 8.5 5.9C9.97276 5.9 11.1667 7.10883 11.1667 8.6Z' stroke='currentColor'/%3E%3C/svg%3E%0A");
}

.icon-left {
    
    --background-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41406 0.707031L1.41406 6.70703L7.41406 12.707' stroke='currentColor' stroke-width='2' stroke-miterlimit='10' /%3E%3C/svg%3E");
   

}

.icon-right {

    
    --background-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.707031 0.707031L6.70703 6.70703L0.707031 12.707' stroke='currentColor' stroke-width='2' stroke-miterlimit='10' /%3E%3C/svg%3E");
   
}
.icon-cart {
    --background-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='currentColor'%3E%3Cpath d='M551.991 64H144.28l-8.726-44.608C133.35 8.128 123.478 0 112 0H12C5.373 0 0 5.373 0 12v24c0 6.627 5.373 12 12 12h80.24l69.594 355.701C150.796 415.201 144 430.802 144 448c0 35.346 28.654 64 64 64s64-28.654 64-64a63.681 63.681 0 0 0-8.583-32h145.167a63.681 63.681 0 0 0-8.583 32c0 35.346 28.654 64 64 64 35.346 0 64-28.654 64-64 0-18.136-7.556-34.496-19.676-46.142l1.035-4.757c3.254-14.96-8.142-29.101-23.452-29.101H203.76l-9.39-48h312.405c11.29 0 21.054-7.869 23.452-18.902l45.216-208C578.695 78.139 567.299 64 551.991 64zM208 472c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm256 0c-13.234 0-24-10.766-24-24s10.766-24 24-24 24 10.766 24 24-10.766 24-24 24zm23.438-200H184.98l-31.31-160h368.548l-34.78 160z'/%3E%3C/svg%3E");
}

.icon-close{
    --background-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75068 0.74932L13.4786 13.4772M13.4786 0.74932L0.75068 13.4772' stroke='%23202020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}