/**
  * Class to add focus outline to an element. This is useful for accessibility.
  */
.focusOutline {
  &:focus {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--mantine-color-gray-9);
    outline-offset: 2px;

    /** Outline color for dark mode needs to be brighter to be more distinctive */
    @mixin dark {
      outline-color: var(--mantine-color-gray-3);
    }
  }
}

/**
  * Class to add a "lift-up" effect to an element on hover, where the border
  * changes color and the shadows are increased.
  */
.hoverShadow {
  transition: border-color 70ms ease, transform 40ms ease, box-shadow 70ms ease;
  border-width: 2px;
}

/** Show hover effect only if device supports hover, to avoid confusing with
  * focus effect.
  */
@media (hover: hover) {
  .hoverShadow:hover {
    border-color: var(--mantine-color-compsocMain-7);
    box-shadow: var(--mantine-shadow-sm);
  }

  /** Slight push-down effect on click for satisfaction */
  .hoverShadow:active {
    transform: translateY(1px);
  }
}
