@use "variables";

@mixin firefox-only {
  @at-root {
    @-moz-document url-prefix() {
      & {
        @content;
      }
    }
  }
}

/* a screen reader friendly approach */
@mixin visual-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

@mixin custom-scrollbar {
  @-moz-document url-prefix() {
    scrollbar-width: thin;
    scrollbar-color: variables.$control-scrollbar transparent;
  }
  @media (pointer: fine) {
    &::-webkit-scrollbar {
      width: 14px;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      overflow: visible;
      background-color: variables.$control-scrollbar;
      // use $gray-100 with opacity 0 for effect of margins of scrollbar
      border: 3px solid rgba(242, 243, 245, 0);
      // hide the background with background clip
      -webkit-background-clip: padding-box;
      background-clip: padding-box;
      border-radius: 8px;
    }
  }
}