@charset "UTF-8";
/* ---------------------------- */
/* --- vendor-prefix mixins --- */
/* ---------------------------- */
/* --------------- */
/* --- helpers --- */
/* --------------- */
/* === flip animation ===
   This effect needs the following elements:
   * flip-container: the container the mixin is applied to. Element that contains all the other elements; on this element the perspective
     property is set and the actual animation is triggered (by applying another class, on hover or however ... )
   * flipper: element that is flipped; this contains an element that serves as the front of the flipped thingy.
   * front: element that serves as the front of the flipped thingy
   * back: element that serves as the back of the flipped thingy. In the current implementation this is realized by an after-pseudoelement on
     the flipper-element. This could also be a separate element

   This mixin up to now is not too generic to keep it simple right now and mainly serves to make the CSS where it is called less cluttered.
   Can be made more generic as soon as needed.
*/
/* === breakpoints === */
.clsy-c-loading-indicator, .clsy-c-btn.clsy-c-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clsy-c-loading-indicator::after, .clsy-c-btn.clsy-c-loading-indicator::after {
  content: " ";
  box-sizing: border-box;
  display: block;
  width: var(--loading-indicator-width);
  height: var(--loading-indicator-width);
  min-width: auto;
  min-height: auto;
  margin: 1px;
  background-color: transparent;
  border-radius: 50%;
  border: var(--loading-indicator-line-thickness) solid;
  border-color: var(--emphasized-color) transparent var(--emphasized-color) transparent;
  animation: rotate-360-deg 1.2s linear infinite;
}

.clsy-c-result-list-item__title .clsy-c-result-list-item__link {
  padding: 0;
  border-bottom: none;
}

.clsy-c-result-list-item__title .clsy-c-result-list-item__link:after {
  content: none;
  display: inline;
  height: auto;
  background-color: transparent;
  position: static;
  bottom: auto;
  left: auto;
  right: auto;
  transition: all 0s 0s ease;
}

.clsy-c-result-list-item__title .clsy-c-result-list-item__link:hover, .clsy-c-result-list-item__title .clsy-c-result-list-item__link:focus, .clsy-c-result-list-item__title .clsy-c-result-list-item__link:active {
  background-color: transparent;
}

.clsy-c-result-list-item__title .clsy-c-result-list-item__link:focus-visible, .clsy-c-result-list-item__title .clsy-c-result-list-item__link:active {
  outline: var(--standard-outline-style);
}

.clsy-c-message {
  --animation-duration-unitless: 200;
  --animation-duration: calc(var(--animation-duration-unitless) * 1ms);
  --mask-icon-width: calc(24px + .8em);
  --mask-icon-height: 100%;
  --mask-icon-color: var(--icon-color-messages);
  display: flex;
  align-items: center;
  position: relative;
  min-height: var(--mask-icon-width);
  line-height: var(--smaller-line-height);
  background-color: var(--cardlike-item-bg-color);
  border-style: solid;
  border-color: var(--message-class-color) !important;
  box-shadow: 0 -1px 0 0 var(--contentsection-border-color), 0 3px 0 0 var(--contentsection-border-color);
  margin: .8em auto;
  max-width: 80ch;
  border-width: 0 5px 0 var(--mask-icon-width);
  transition: opacity var(--animation-duration) ease-out, transform var(--animation-duration) var(--bouncy-transition-function);
  transform: scaleY(1);
  opacity: 1;
}

.clsy-c-message::before {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
  position: absolute;
  top: 0;
  left: calc(-1 * var(--mask-icon-width));
  bottom: 0;
}

.clsy-c-message--info {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/belck9g/image/pwa/icons/icon-message-info.svg);
  --message-class-color: var(--message-color-info);
}

.clsy-c-message--warning {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/86ckdgje/image/pwa/icons/icon-message-warning.svg);
  --message-class-color: var(--message-color-warning);
}

.clsy-c-message--error {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/ihhdd7kg/image/pwa/icons/icon-message-error.svg);
  --message-class-color: var(--message-color-error);
  --mask-icon-color: var(--icon-color-messages--error);
}

.clsy-c-message--success {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/l9gccbbe/image/pwa/icons/icon-message-success.svg);
  --message-class-color: var(--message-color-success);
}

.clsy-c-message:has(.clsy-c-message__close) {
  display: flex;
  gap: var(--button-gutter);
  align-items: flex-start;
}

.clsy-c-message--hidden {
  opacity: 0;
  transform: scaleY(0);
}

.clsy-c-message__close {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/ifjbbllb/image/pwa/icons/icon-close.svg);
  --mask-icon-color: var(--standard-link-color);
  margin-left: auto;
}

.clsy-c-message > div:first-child {
  padding: var(--standard-content-padding-vertical) var(--fixed-content-padding-horizontal);
}

.clsy-c-message ul {
  margin: .4em 0 0 .4em;
  padding: 0;
  list-style-type: none;
}

.clsy-c-message ul > li {
  position: relative;
  margin: 0;
  padding: .2em 0 .2em .6em;
}

.clsy-c-message ul > li::before {
  content: "›";
  position: absolute;
  top: .18em;
  left: 0;
  font-weight: bold;
  color: var(--less-important-text-color);
}

/* === unread items indicator === */
.clsy-count-badge {
  --badge-diameter: 1.9em;
  display: inline-block;
  min-width: var(--badge-diameter);
  height: var(--badge-diameter);
  line-height: 1.7em;
  color: var(--emphasized-background-text-color);
  font-size: var(--fontsize-small);
  font-weight: bold;
  text-align: center;
  background-color: var(--emphasized-color);
  border: 2px solid var(--standard-bg-color);
  border-radius: calc(var(--badge-diameter) / 2);
  transform: scale(1);
  transition: transform 300ms var(--very-bouncy-transition-function), visibility 300ms;
}

.clsy-count-badge--hidden {
  visibility: hidden;
  transform: scale(0);
}

.clsy-count-badge--nav-trigger {
  position: absolute;
  top: 2px;
  right: 2px;
}

.clsy-c-result-list.clsy-c-search-topads {
  margin: 0 0 var(--contentsection-bottom-margin);
  background-color: var(--contentsection-bg-color);
  border: solid var(--contentsection-border-color);
  border-width: var(--contentsection-border-top-width) 0 var(--contentsection-border-bottom-width);
}

/*!
 *  This document contains trade secret data which is the property of
 *  markt.de GmbH & Co KG. Information contained herein may not be used,
 *  copied or disclosed in whole or part except as permitted by written
 *  agreement from markt.de GmbH & Co KG.
 *
 *  Copyright (c) 2019 markt.de GmbH & Co KG / Munich / Germany
 */
/* === Resultlist. This is used in searchresults and favorites  === */
.clsy-c-result-list {
  /* --- image settings --- */
  container-name: result-list;
  container-type: inline-size;
  /* --- actual styling --- */
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 375px) {
  .clsy-c-result-list.clsy-c-result-list--multicol {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1px;
    margin: 0;
    background-color: var(--standard-border-color);
    border: solid var(--standard-border-color);
    border-width: 1px 0;
  }
  .clsy-c-result-list.clsy-c-result-list--multicol .clsy-c-result-list-item {
    --thumbnail-width: 87;
    border: none;
  }
}

.clsy-c-result-list.clsy-c-search-topads {
  position: relative;
  margin-top: 2em;
}

.clsy-c-result-list.clsy-c-search-topads:before {
  content: "Top Anzeigen";
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.1em calc( var(--fixed-content-padding-horizontal) * 0.5) 0.1em calc( var(--fixed-content-padding-horizontal) * 1.5);
  z-index: var(--fixed-zindex-content-elements);
  min-width: 5rem;
  font-size: var(--fontsize-medium);
  text-transform: uppercase;
  color: var(--inverted-text-color);
  background-color: var(--upselling-badge-standard-bg-color);
  transform: translateY(-100%);
}

.clsy-c-result-list li {
  border-top: var(--standard-border-style);
}

.clsy-c-result-list li:last-child {
  border-bottom: var(--standard-border-style);
}

.clsy-c-result-list + .clsy-c-result-list > li:first-child {
  border-top: none;
}

.clsy-c-result-list li li:last-child {
  border-bottom: none;
}

.clsy-c-result-list li li:first-child {
  border-top: none;
}

.clsy-c-result-list li.clsy-c-advsection:only-child {
  border-top: none;
  border-bottom: none;
}

.clsy-c-result-list > .clsy-c-result-list-item {
  margin: 0;
}

.clsy-c-result-list-item {
  --thumbnail-width: 132;
  --thumbnail-height: calc(var(--thumbnail-width) * var(--thumbnail-aspect-ratio-y) / var(--thumbnail-aspect-ratio-x));
  --upselling-border-width: 5;
  --display-description-value: -webkit-box;
  --listitem-padding: var(--fixed-content-padding-horizontal);
  --clip-value-left: calc(var(--upselling-border-width) * 1px - var(--listitem-padding));
  --thumbnail-clip-path: inset(0 0 0 var(--clip-value-left));
  display: grid;
  grid-template-columns: calc(var(--thumbnail-width) * 1px) 1fr;
  grid-column-gap: var(--fixed-content-padding-horizontal);
  grid-row-gap: var(--standard-content-padding-vertical);
  align-items: start;
  position: relative;
  padding: calc(var(--standard-content-padding-vertical) / 2) var(--listitem-padding);
  font-size: var(--fontsize-small);
  transition: background-color .3s;
  background: var(--contentsection-bg-color);
}

@container result-list (width < 270px) {
  .clsy-c-result-list-item {
    --thumbnail-width: 270;
    --thumbnail-height: 270;
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-bottom: var(--standard-content-padding-vertical);
  }
  .clsy-c-result-list-item img.clsy-c-result-list-item__thumbnail-img {
    width: 100%;
    border-width: 0 0 1px;
  }
  .clsy-c-result-list-item__content {
    padding-left: var(--fixed-content-padding-horizontal);
    padding-right: var(--fixed-content-padding-horizontal);
  }
  .clsy-c-result-list-item__content-top-left {
    flex-direction: row;
  }
  .clsy-c-result-list-item__content-bottom-right {
    justify-content: flex-end !important;
  }
  .clsy-c-result-list-item__content-bottom-right .clsy-c-verifications {
    margin-top: var(--standard-content-padding-vertical);
    transform: scale(0.8);
    transform-origin: right;
  }
}

@container result-list (270px <= width < 375px) {
  .clsy-c-result-list-item {
    --thumbnail-width: 87;
    --display-description-value: none;
  }
}

@container result-list (width < 500px) {
  .clsy-c-result-list-item {
    --listitem-padding: 0px;
  }
}

.clsy-c-result-list-item:hover, .clsy-c-result-list-item:focus, .clsy-c-result-list-item:focus-within, .clsy-c-result-list-item:active {
  background-color: var(--link-hover-bg-color);
}

.clsy-c-result-list-item:hover {
  cursor: pointer;
}

a.clsy-c-result-list-item {
  color: var(--standard-text-color);
  border-bottom: none;
}

a.clsy-c-result-list-item:after {
  content: none;
}

a.clsy-c-result-list-item:not([href]) {
  padding: var(--standard-content-padding-vertical) var(--standard-content-padding-horizontal);
}

.clsy-c-result-list-item__thumbnail {
  position: relative;
}

.clsy-c-result-list-item__thumbnail-img {
  display: block;
  width: calc(var(--thumbnail-width) * 1px);
  height: calc(var(--thumbnail-height) * 1px);
  aspect-ratio: var(--thumbnail-width)/var(--thumbnail-height);
  object-fit: cover;
  font-size: var(--fontsize-xsmall);
  line-height: var(--smaller-line-height);
  border: var(--standard-border-style);
}

.clsy-c-result-list-item__thumbnail-img[src*="categoryDummyImages"] {
  object-fit: contain;
}

.clsy-c-result-list-item__content {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
  padding-top: .2rem;
  padding-bottom: .2rem;
  line-height: var(--smaller-line-height);
}

.clsy-c-result-list-item__content-top:has(.clsy-c-result-list-item__buttons) {
  display: grid;
  grid-template-columns: 1fr var(--smaller-touchtarget-min-width);
  grid-template-areas: "top-left buttons" "title buttons";
  gap: .1em .4em;
  align-items: baseline;
}

.clsy-c-result-list-item__content-top-left {
  grid-area: top-left;
  display: flex;
  gap: var(--xsmall-gutter);
  align-items: center;
  align-self: start;
}

.clsy-c-result-list-item__content-bottom {
  display: grid;
  grid-template-columns: 1fr var(--smaller-touchtarget-min-width);
}

@container result-list ((width < 375px) or (width > 500px)) {
  .clsy-c-result-list-item__content-bottom {
    grid-template-columns: 1fr auto;
  }
  .clsy-c-result-list-item__content-bottom .clsy-c-verifications.clsy-c-verifications--resultitem {
    flex-direction: row;
    gap: .2em;
    padding: var(--verifications-default-padding);
    padding-left: var(--verifications-start-padding);
  }
  .clsy-c-result-list-item__content-bottom .clsy-c-verifications.clsy-c-verifications--resultitem .clsy-c-verification__online {
    --offset-top: 18px;
    --offset-left: 18px;
  }
}

@container result-list (width < 270px) {
  .clsy-c-result-list-item__content-bottom {
    grid-template-columns: 1fr;
    grid-gap: var(--standard-gutter);
  }
}

.clsy-c-result-list-item__content-bottom-left {
  display: flex;
  flex-direction: column;
  gap: var(--xsmall-gutter);
  min-width: 0;
}

.clsy-c-result-list-item__content-bottom-right {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-width: var(--smaller-touchtarget-min-width);
}

.clsy-c-result-list-item__placeholder {
  flex: 1;
}

.clsy-c-result-list-item__date {
  font-size: var(--fontsize-small);
}

.clsy-c-result-list-item__pushup {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/76d99lgc/image/pwa/icons/icon-rocket.svg);
  --mask-icon-color: var(--less-important-text-color);
  --mask-icon-width: 16px;
  --mask-icon-height: 20px;
  --mask-icon-transform: scale(70%);
  align-items: center;
  gap: 0;
  font-size: var(--fontsize-xsmall);
  color: var(--less-important-text-color);
}

.clsy-c-result-list-item__partner {
  margin-left: .5em;
  font-size: var(--fontsize-xsmall);
  color: var(--less-important-text-color);
}

.clsy-c-result-list-item__title {
  --line-clamp: 2;
  grid-area: title;
  margin: calc(.2rem - var(--standard-outline-width)) var(--standard-outline-width) calc(.5rem - var(--standard-outline-width)) calc(-1 * var(--standard-outline-width));
  padding: var(--standard-outline-width);
  color: var(--standard-text-color);
  font-weight: bold;
  font-size: var(--fontsize-medium);
  line-height: var(--smaller-line-height);
}

.clsy-c-result-list-item__title:has(:focus-visible) {
  outline: var(--standard-outline-style);
  border-radius: var(--standard-outline-border-radius);
}

@container result-list (width < 270px) {
  .clsy-c-result-list-item__title {
    --line-clamp: 4;
  }
}

.clsy-c-result-list-item__title .clsy-c-result-list-item__link {
  display: block;
  color: var(--standard-text-color);
  font-weight: bold;
  filter: saturate(0.1);
}

.clsy-c-result-list-item__title .clsy-c-result-list-item__link:focus-visible, .clsy-c-result-list-item__title .clsy-c-result-list-item__link:focus {
  outline: none;
}

.clsy-c-result-list-item.clsy-c-result-list-item--inactive .clsy-c-result-list-item__link {
  cursor: auto;
}

.clsy-c-result-list-item__buttons {
  --mask-icon-color: var(--standard-link-color);
  grid-area: buttons;
}

.clsy-c-result-list-item__description {
  --line-clamp: 2;
  display: var(--display-description-value);
  margin: 0;
  filter: saturate(0.1);
  font-size: var(--fontsize-small);
  line-height: var(--smaller-line-height);
}

.clsy-c-result-list-item__description br {
  display: none;
}

.clsy-c-result-list-item__description em {
  font-weight: bold;
  font-style: normal;
}

.clsy-c-result-list-item:not(:has(.clsy-c-result-list-item__price)) .clsy-c-result-list-item__description {
  --line-clamp: 3;
}

.clsy-c-result-list-item__price {
  display: flex;
  gap: var(--medium-gutter);
  max-width: none;
  margin: 0 0 var(--standard-bottom-margin);
  padding: 0;
  font-size: var(--fontsize-medium);
  /* font-weight: bold; */
  line-height: var(--smaller-line-height);
}

.clsy-c-result-list-item__price-amount:empty {
  display: none;
}

.clsy-c-result-list-item__location {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clsy-c-result-list-item__debug-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 0;
}

.clsy-c-result-list-item__debug-stats span {
  padding: .2em .2em 0;
  font-size: var(--fontsize-xsmall);
  line-height: 1;
  background-color: var(--debug-stats-bg-color);
  border-radius: var(--standard-border-radius);
}

.clsy-c-result-list-item.clsy-c-result-list-item--inactive, .clsy-c-result-list-item.clsy-c-result-list-item--inactive:hover, .clsy-c-result-list-item.clsy-c-result-list-item--inactive:focus, .clsy-c-result-list-item.clsy-c-result-list-item--inactive:active {
  background-color: var(--disabled-content-bg-color);
  cursor: auto;
}

.clsy-c-result-list-item.clsy-c-result-list-item--inactive > :not(.clsy-c-result-list-item__state) {
  opacity: .5;
}

.clsy-c-result-list-item.clsy-c-result-list-item--inactive .clsy-c-result-list-item__thumbnail > img {
  filter: blur(1px) grayscale(70%);
}

.clsy-c-result-list-item__state {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: .2em .4em;
  font-size: var(--fontsize-small);
  background-color: var(--dialog-bg-color);
  border: solid var(--emphasized-color);
  border-width: 1px 10px 1px 0;
  border-radius: 0 var(--standard-border-radius) var(--standard-border-radius) 0;
  box-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.4);
}

.clsy-c-result-list-item.markt_upselling_border {
  box-shadow: calc(-1 * 1px * var(--upselling-border-width)) 0 0 var(--emphasized-color) inset, calc(1px * var(--upselling-border-width)) 0 0 var(--emphasized-color) inset;
}

.clsy-c-result-list-item.markt_upselling_border .clsy-c-result-list-item__thumbnail {
  clip-path: var(--thumbnail-clip-path);
}

.clsy-c-result-list #markt_marktletWrapper_RESULT_LIST_TOP_PWA a,
.clsy-c-result-list #markt_marktletWrapper_RESULT_LIST_MIDDLE_PWA_DESKTOP a,
.clsy-c-result-list #markt_marktletWrapper_RESULT_LIST_MIDDLE_PWA_MOBILE a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clsy-c-result-list #markt_marktletWrapper_RESULT_LIST_TOP_PWA a:focus-visible,
.clsy-c-result-list #markt_marktletWrapper_RESULT_LIST_MIDDLE_PWA_DESKTOP a:focus-visible,
.clsy-c-result-list #markt_marktletWrapper_RESULT_LIST_MIDDLE_PWA_MOBILE a:focus-visible {
  outline-offset: calc(var(--standard-outline-width) * -1);
  border-radius: calc(2 * var(--standard-outline-border-radius));
}

.clsy-c-user {
  --icon-width: 24px;
  --icon-height: 24px;
  --bg-color: var(--verifications-bg-color);
  --icon-padding: 2px;
  --mask-icon-color: var(--inverted-text-color);
  --mask-icon-image: url(https://static.testing.markt.de/bundles/8e9a9j7h/image/pwa/icons/icon-user.svg);
  --mask-icon-width: var(--icon-width);
  --mask-icon-height: var(--icon-height);
  position: relative;
  padding: var(--icon-padding);
  background-color: var(--bg-color);
  border-radius: 50%;
}

.clsy-c-user:has(.clsy-c-user__vip) {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/7k8h8lh8/image/pwa/icons/icon-crown.svg);
  --bg-color: var(--emphasized-color);
}

.clsy-c-user:has(.clsy-c-user__premium) {
  border: 3px solid var(--emphasized-color);
}

.clsy-c-user__profile-image {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--icon-width) + var(--icon-padding) * 2);
  height: calc(var(--icon-height) + var(--icon-padding) * 2);
  border-radius: 50%;
  object-fit: cover;
}

.clsy-c-user__profile-image[src$="default_private.svg"] {
  display: none;
}

.clsy-c-user::before {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
}

.clsy-c-user__online {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/klh997el/image/pwa/icons/icon-online-indicator.svg);
  --mask-icon-color: var(--icon-color-success);
  --mask-icon-width: 13px;
  --mask-icon-height: 13px;
  --mask-icon-size: 13px auto;
  position: absolute;
  top: 20px;
  left: 18px;
}

.clsy-c-user__online::after {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
  display: block;
  position: absolute;
  border-radius: 50%;
  top: 0;
  left: 0;
}

.clsy-c-user__premium {
  --mask-icon-image: url(https://static.testing.markt.de/bundles/9jjfi6h/image/pwa/icons/icon-premium-marker.svg);
  --mask-icon-color: var(--higher-contrast-emphasized-color);
  --mask-icon-width: calc(1.2em + 4px);
  --mask-icon-height: var(--mask-icon-width);
  --mask-icon-size: 1.2em auto;
  --mask-icon-transform: translateY(-1px);
  position: absolute;
  top: -40%;
  left: 52%;
}

.clsy-c-user__premium::before {
  content: "";
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  position: absolute;
  background-color: var(--contentsection-bg-color);
  border-radius: 50%;
}

.clsy-c-user__premium::after {
  content: "";
  flex: none;
  display: block;
  width: var(--mask-icon-width);
  height: var(--mask-icon-height);
  transform: var(--mask-icon-transform);
  opacity: var(--mask-icon-opacity);
  background-color: var(--mask-icon-color);
  -webkit-mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  mask: var(--mask-icon-image) var(--mask-icon-position) no-repeat;
  -webkit-mask-size: var(--mask-icon-size);
  mask-size: var(--mask-icon-size);
}