@use 'lib/border';
// @use 'lib/frosted-glass';
@use 'lib/theme';
@use 'lib/motion';
@use 'sass:map';

$pds-hover-border-radius-map: (
  'small': border.$pds-border-radius-small,
  'medium': border.$pds-border-radius-medium,
);

$pds-offset-horizontal: 2px;

@mixin pds-hover($border-radius: 'small') {
  // it can easily be overwritten on purpose (when placed here) and visually reflected
  @if map.has-key($pds-hover-border-radius-map, $border-radius) {
    border-radius: map.get($pds-hover-border-radius-map, $border-radius);
  } @else {
    @if ($border-radius) {
      border-radius: $border-radius;
    } @else {
      border-radius: map.get($pds-hover-border-radius-map, 'small');
    }
  }
  margin-left: -#{$pds-offset-horizontal};
  margin-right: -#{$pds-offset-horizontal};
  padding-left: $pds-offset-horizontal;
  padding-right: $pds-offset-horizontal;
  transition: background var(--p-transition-duration, motion.$pds-motion-duration-short) motion.$pds-motion-easing-base;
  @media (hover: hover) {
    &:hover {
      // @include pds-frosted-glass;
      background: theme.$pds-theme-light-state-hover;
    }
  }
}