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

.root {
  position: relative;
}

.input {
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;

  /* Highlight the borders if the checkbox is hovered, focused or checked */
  &:hover + label .box,
  &:focus + label .box,
  &:checked + label .box {
    stroke: var(--marketplaceColor);
  }

  /* Display the "check" when checked */
  &:checked + label .checked {
    display: inline;
  }

  /* Hightlight the text on hover and focus */
  &:focus + label .text,
  &:hover + label .text {
    color: var(--matterColorDark);
  }
}

.label {
  display: flex;
  align-items: center;
  padding: 0;
}

.checkbox {
  margin-right: 12px;
}

.checked {
  display: none;
  fill: var(--marketplaceColor);
}

.box {
  stroke: var(--matterColorAnti);
}

.text {
  @apply --marketplaceListingAttributeFontStyles;
  color: var(--matterColor);
  margin-top: -1px;
  margin-bottom: 1px;
}
