@use '~styles/global.scss' as *;

.container {
  display: flex;
  flex-flow: row nowrap;

  align-items: center;

  font-family: $mainFont;

  color: $secondaryPurple;

  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;

  column-gap: 0.5rem;

  cursor: pointer;
  user-select: none;
}

.input {
  width: 2rem;
  height: 2rem;

  display: block;

  border: 2px solid $tertiaryGray;

  position: relative;

  background-color: $primaryWhite;
  border-radius: 3px;

  cursor: inherit;
  appearance: none;

  &:active,
  &:checked:active {
    border-color: $secondaryPurple;
  }

  &:checked {
    border-color: $secondaryPurple;

    background-color: $secondaryPurple;

    &::after {
      width: 100%;
      height: 100%;

      display: block;

      position: absolute;
      top: 0;
      left: 0;

      background-image: url('./assets/check.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;

      content: '';
    }
  }
}

.text {
  flex-grow: 1;

  text-align: justify;
}
