@import "./themes";

@mixin disabled {
  @include theme-prop(border-color, disabled-background-color);
  @include theme-prop(color, disabled-text-color);
  cursor: not-allowed;
  &:hover {
    background-color: transparent;
  }
}

@mixin reset-button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;

  background: transparent;

  /* inherit font & color from ancestor */
  color: inherit;
  font: inherit;

  /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
  line-height: normal;

  /* Corrects font smoothing for webkit */
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  /* Corrects inability to style clickable `input` types in iOS */
  -webkit-appearance: none;

  @include focus-style();
}

@mixin focus-style($focus-radius: 4px) {
  &:focus:not(.focus-visible) {
    outline: none;
  }
  &:focus-visible,
  &.focus-visible {
    @include focus-style-css($focus-radius);
  }
}

@mixin focus-style-css($focus-radius: 4px) {
  outline: none;
  box-shadow: 0 0 0 3px hsla(209, 100%, 50%, 0.5), 0px 0px 0px 1px var(--primary-hover-color) inset;
  z-index: 11;
  border-radius: $focus-radius;
}


@mixin _scrollerThumb($color) {
  &::-webkit-scrollbar-thumb {
    background-color: $color;
    border-radius: 4px;
  }
}
@mixin scroller($width: 4px, $color: var(--ui-border-color)) {
  &::-webkit-scrollbar {
    width: $width;
  }

  @include _scrollerThumb($color);
}