@import '../../marketplace.css';

:root {
  --lineHeight: 24px;
  --lineThroughTop: calc(var(--lineHeight) - 7px);
  --lineThroughBottom: calc(var(--lineHeight) - 6px);
  --lineThroughTopMobile: calc(var(--lineHeight) - 9px);
  --lineThroughBottomMobile: calc(var(--lineHeight) - 8px);
}

.root {
  margin: 0;
}

.twoColumns {
  @media (--viewportMedium) {
    column-count: 2;
  }
}

.item {
  display: flex;
  align-items: center;
  padding: 3px 0;

  @media (--viewportMedium) {
    padding: 4px 0;
  }
}

.checkIcon {
  margin: 1px 8px -1px 0;
}

.hidden {
  visibility: hidden;
}

.marketplaceFill {
  fill: var(--marketplaceColor);
}

.iconWrapper {
  display: inline-flex;
  align-items: center;
}

.labelWrapper {
  display: inline-block;
}

.selectedLabel,
.notSelectedLabel {
  @apply --marketplaceBodyFontStyles;
  line-height: var(--lineHeight);
  margin: 0;
}

.selectedLabel {
  font-weight: var(--fontWeightSemiBold);
}

.notSelectedLabel {
  color: var(--matterColorNegative);
  position: relative;

  /* line-through */
  background-image: linear-gradient(
    transparent var(--lineThroughTopMobile),
    var(--matterColorNegative) var(--lineThroughTopMobile),
    var(--matterColorNegative) var(--lineThroughBottomMobile),
    transparent var(--lineThroughBottomMobile)
  );

  @media (--viewportMedium) {
    background-image: linear-gradient(
      transparent var(--lineThroughTop),
      var(--matterColorNegative) var(--lineThroughTop),
      var(--matterColorNegative) var(--lineThroughBottom),
      transparent var(--lineThroughBottom)
    );
  }
}
