@use './_themesMixins.scss' as theme;
@use '../modules/_primitivesVariables.scss' as var;
@use '../modules/_helpers.scss' as helper;
@import '../modules/_pxToRem.scss';

// accessibility feature to show user what element is in focus
@mixin input-focus {
  &:focus:not(:disabled):not([aria-disabled='true']) {
    @include theme.border-input-active;
    outline: none;
    ~ .slotsBefore {
      @include theme.border-input-active;
    }
    ~ .slotsAfter {
      @include theme.border-input-active;
    }
  }
}

@mixin input-hover {
  &:hover:not(:disabled):not([aria-disabled='true']) {
    @include theme.border-input-hover;
    outline: none;
    ~ .slotsBefore {
      @include theme.border-input-hover;
    }
    ~ .slotsAfter {
      @include theme.border-input-hover;
    }
  }
}

@mixin button-focus {
  outline: px-to-rem(4) solid transparent;
  transition: helper.$transitionDefault;
  &:focus-visible {
    outline-color: rgba(var.$color-blue-400, 0.2);
    :global([data-theme='dark']) & {
      outline-color: rgba(var.$color-blue-400, 0.1);
    }
  }
}

@mixin navbar-focus {
  outline: px-to-rem(4) solid transparent;
  outline-offset: -8px;
  transition: helper.$transitionDefault;
  &:focus-visible {
    outline-color: rgba(var.$color-blue-400, 0.2);
    :global([data-theme='dark']) & {
      outline-color: rgba(var.$color-blue-300, 0.1);
    }
  }
}

@mixin checkbox-radio-focus {
  label {
    &:before {
      transition: helper.$transitionDefault;
      outline: px-to-rem(5) solid transparent;
    }
  }
  input:focus-visible + label {
    &:before {
      outline-color: rgba(var.$color-blue-400, 0.2);
      :global([data-theme='dark']) & {
        outline-color: rgba(var.$color-blue-300, 0.1);
      }
    }
  }
}

// accessibility feature to show user what element is in focus
// this version lets user focus on hidden inputs
@mixin input-focus-label {
  outline: px-to-rem(4) solid transparent;
  &:focus:not(:disabled):not([aria-disabled='true']) + label {
    @include theme.border-input-active;
    outline: none;
  }

  &:checked + label {
    outline: none;
    :global([data-theme='dark']) & {
      outline: none;
    }
  }
}

// standard disabled element styles, for button, input, etc
@mixin input-disabled {
  &:disabled {
    opacity: 0.3;
    pointer-events: none;
    touch-action: none;
    user-select: none;
  }
}

// standard disabled element styles, for button, input, etc
@mixin element-disabled {
  opacity: 0.3;
  pointer-events: none;
  touch-action: none;
  user-select: none;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@mixin skeleton-animation {
  &:after {
    animation: linear 0.5s infinite normal none running shimmer;
    background: linear-gradient(90deg, transparent, var.$opacity-black-03, transparent);
    content: '';
    height: 100%;
    inset: 0px;
    position: absolute;
    transform: translateX(-100%);
    :global([data-theme='dark']) & {
      background: linear-gradient(90deg, transparent, var.$opacity-white-01, transparent);
    }
  }
}