/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

// For an explanation of the ":focus/:focus-visible" states see:
// - https://github.com/hashicorp/design-system-components/issues/161
// - https://www.tpgi.com/focus-visible-and-backwards-compatibility/

@mixin hds-focus-ring-basic($color: action) {
    outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
    outline-color: transparent;
  
    // default focus for browsers that still rely on ":focus"
    &:focus,
    &.mock-focus {
      box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
    }
    // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
    &:focus:not(:focus-visible) {
      box-shadow: none;
    }
    // set focus for browsers that support ":focus-visible"
    &:focus-visible {
      box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
    }
    // remove the focus ring on "active + focused" state (by design)
    &:focus:active,
    &.mock-focus.mock-active {
      box-shadow: none;
    }
  }
  
  @mixin hds-focus-ring-with-pseudo-element($top: 0, $right: 0, $bottom: 0, $left: 0, $radius: 5px, $color: action) {
    position: relative;
    outline-style: solid; // used to avoid double outline+focus-ring in Safari (see https://github.com/hashicorp/design-system-components/issues/161#issuecomment-1031548656)
    outline-color: transparent;
    isolation: isolate; // used to create a new stacking context (needed to have the pseudo element below text/icon but not the parent container)
  
    &::before {
      position: absolute;
      top: $top;
      right: $right;
      bottom: $bottom;
      left: $left;
      z-index: -1;
      border-radius: $radius;
      content: "";
    }
  
    // default focus for browsers that still rely on ":focus"
    &:focus,
    &.mock-focus {
      &::before {
        box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
      }
    }
    // undo the previous declaration for browsers that support ":focus-visible" but wouldn't normally show default focus styles
    &:focus:not(:focus-visible) {
      &::before {
        box-shadow: none;
      }
    }
    // set focus for browsers that support ":focus-visible"
    &:focus-visible {
      &::before {
        box-shadow: var(--token-focus-ring-#{$color}-box-shadow);
      }
    }
    // remove the focus ring on "active + focused" state (by design)
    &:focus:active,
    &.mock-focus.mock-active {
      &::before {
        box-shadow: none;
      }
    }
  }