@use '../shared.scss';

.checkbox {
  position: relative;
  margin-bottom: var(--base);

  :global {
    button {
      border: 0;
      background: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 1rem;

      &:focus,
      &:active {
        outline: none;
      }

      &:hover {
        svg {
          opacity: 0.2;
        }
      }
    }

    input {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
    }
  }
}

.container {
  display: flex;
}

.input {
  @include shared.formInput;
  padding: 0;
  line-height: 0;
  position: relative;
  width: var(--base);
  height: var(--base);
  margin-right: calc(var(--base) * 0.5);
  margin-bottom: 0;

  svg {
    opacity: 0;
  }
}

.checked {
  :global {
    svg {
      opacity: 1 !important;
    }
  }
}

.label {
  display: block;
}
