// We need to use !important here because the react-switch library that we are using for the Switch has inline styling. This is how we are overriding those styles.
.switch {
  :global .react-switch-handle {
    top: -2px !important;
    border: 2px solid var(--medium-purple) !important;
  }
  :global .react-switch-bg {
    background: var(--medium-purple) !important;
  }
}
.on {
  :global .react-switch-handle {
    border: 2px solid var(--dark-blue) !important;
    transform: translateX(15px) !important;
  }
  :global .react-switch-bg {
    background: var(--dark-blue) !important;
  }
}

.switchContainer {
  display: flex;
  align-items: center;
  gap: 8px;
  label {
    margin-bottom: 0;
  }
}

.unstyled {
  all: unset;
  cursor: pointer;
  &:hover {
    box-shadow: none;
    background: none;
  }
}