.wrapper {
  padding: var(--mantine-spacing-md);
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
  border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
  border-radius: var(--mantine-radius-default);
  box-shadow: var(--mantine-shadow-md);

  &[data-primary="true"] {
    background-color: var(--mantine-primary-color-filled);
    border-color: var(--mantine-primary-color-filled);
    color: var(--mantine-color-white);
  }

  @mixin hover {
    transition: all ease 150ms;
    border-color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2));
    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));

    &[data-primary="true"] {
      background-color: var(--mantine-primary-color-filled-hover);
    }
  }
}

.label {
  font-weight: 500;
}
