@use 'semanticColors' as *;
@use 'func' as *;

// --- Shadows

// TODO: Need better semantic names
$shadow: (
  shadow-flat: none,
  shadow-slight: 0 1px 2px 0 rgba($black-rgb-color, 0.05),
  shadow-bordered: (0 1px 3px 0 rgba($black-rgb-color, 0.1), 0 1px 2px 0 rgba($black-rgb-color, 0.06)),
  shadow-3: (0 4px 6px -1px rgba($black-rgb-color, 0.1), 0 2px 4px -1px rgba($black-rgb-color, 0.06)),
  shadow-4: (0 10px 15px -3px rgba($black-rgb-color, 0.1), 0 4px 6px -2px rgba($black-rgb-color, 0.05)),
  shadow-popup: (0 20px 25px -5px rgba($black-rgb-color, 0.1), 0 10px 10px -5px rgba($black-rgb-color, 0.04)),
  shadow-6: (0 25px 50px -12px rgba($black-rgb-color, 0.25)),
  shadow-inset-slight: inset 0 2px 4px 0 rgba($black-rgb-color, 0.06),
  shadow-inset-well: inset 0 3px 5px 0 rgba($black-rgb-color, 0.1),
);

// $shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);

$button-radius: 0.5rem; // 8px

@function shadow($name: string) {
  @return map-get($shadow, "shadow-" + $name);
}

@mixin depth($name: string) {
  box-shadow: shadow($name);
}

@mixin focused {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    border: 2px solid $control-focus-color;
    border-radius: $button-radius;

    pointer-events: none;
  }

  &:focus {
    outline: none;
  }

  input:focus {
    outline: none;
  }
}
