@import './../functions', './../mixins', './../variables';

@layer base {
  a,
  button,
  label,
  input,
  textarea,
  [role='menu'],
  li[tabindex] {
    &:focus,
    &:focus-visible {
      outline: none;
      box-shadow: $outline get-map($theme, 'default_focus');
    }

    &:active {
      box-shadow: none;
    }
  }

  [role='menu'],
  [role='menu'] a,
  li[tabindex] {
    &:focus,
    &:focus-visible {
      box-shadow: $outline get-map($theme, 'default_focus') inset;
    }
  }

  .hidden {
    @include hidden-element;

    @include amend-selector-path('.hidden', 'button.hidden, .button.hidden') {
      &.tertiary:not(.new) {
        padding: 0;
      }
    }

    &.show-on-focus {
      &:focus,
      &:focus-within {
        @include show-hidden-element;
      }
    }
  }
}
