@import "helpers/variables";
@import "helpers/functions";
@import "helpers/mixins";

.focus-source-key .focusable {
  &:focus {
    outline: none;
    box-shadow: none;
  }

  &__ring {
    all: unset;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(0, 0);
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 999999999;
    pointer-events: none;
    border-radius: 10px;
    background-color: transparent;
    border: none;
    outline: 2px dashed #fff;
    outline-offset: 2px;

    &[data-focusable-transition="1"],
    &[data-focusable-transition="true"] {
      transition: all 400ms easing(out-expo);
    }
  }
}