.create-candidate-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: var(--mantine-spacing-xs);
  padding: var(--mantine-spacing-md);
  width: 100px;
  height: 200px;
  text-align: center;
  border-radius: var(--mantine-radius-sm);
  font-size: var(--mantine-font-size-sm);
  border: 1px solid
    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  transition: all 100ms ease-in-out;
  background-color: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-6)
  );

  @mixin hover {
    background-color: light-dark(
      var(--mantine-color-gray-1),
      var(--mantine-color-dark-5)
    );
  }
}

.candidate-card {
  width: 256px;
  height: 200px;
  border: 1px solid
    light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
  border-radius: var(--mantine-radius-sm);
  background-color: light-dark(
    var(--mantine-color-gray-0),
    var(--mantine-color-dark-6)
  );
  transition: all 100ms ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--mantine-spacing-xs);
}
