import { css } from "lit";
const componentStyle = css`
          * {
            -webkit-tap-highlight-color: transparent;
          }

:host {
  display: inline-flex;
  line-height: 0;
}

.sequence-loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spinner-size);
  height: var(--spinner-size);
  line-height: 0;
  vertical-align: middle;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  appearance: none;
}

.sequence-loading-spinner.type-indicator,.sequence-loading-spinner.type-tag {
    --spinner-size: var(--global-size-spacing-icon-icon-size-small);
    --spinner-stroke-width: calc(var(--ui-components-button-stroke-weight) * 2);
  }

.sequence-loading-spinner.type-indicator-point {
    --spinner-size: calc(var(--global-size-spacing-target-padding) * 2);
    --spinner-stroke-width: calc(var(--ui-components-button-stroke-weight) * 2);
  }

.sequence-loading-spinner.type-tag-point {
    --spinner-size: var(--global-size-spacing-icon-icon-size-large);
    --spinner-stroke-width: calc(var(--ui-components-button-stroke-weight) * 3);
  }

.sequence-loading-spinner.type-button,.sequence-loading-spinner.type-button-point {
    --spinner-stroke-width: calc(var(--ui-components-button-stroke-weight) * 4);
  }

.sequence-loading-spinner.type-button {
    --spinner-size: var(--global-size-spacing-icon-icon-size-regular);
  }

.sequence-loading-spinner.type-button-point {
    --spinner-size: var(--ui-components-button-touch-target-size);
  }

.sequence-loading-spinner .spinner {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    --spinner-radius: calc(
      (var(--spinner-size) - var(--spinner-stroke-width)) / 2
    );
    --spinner-cap-size: var(--spinner-stroke-width);
  }

:is(.sequence-loading-spinner .spinner)::before,:is(.sequence-loading-spinner .spinner)::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-sizing: border-box;
    }

:is(.sequence-loading-spinner .spinner)::before {
      border: var(--spinner-stroke-width) solid var(--element-disabled-color);
      z-index: 0;
    }

:is(.sequence-loading-spinner .spinner)::after {
      z-index: 1;
      -webkit-mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--spinner-stroke-width)),
        black calc(100% - var(--spinner-stroke-width))
      );
      mask: radial-gradient(
        farthest-side,
        transparent calc(100% - var(--spinner-stroke-width)),
        black calc(100% - var(--spinner-stroke-width))
      );
    }

:is(.sequence-loading-spinner .spinner) .cap {
      position: absolute;
      top: 50%;
      left: 50%;
      width: var(--spinner-cap-size);
      height: var(--spinner-cap-size);
      border-radius: 50%;
      pointer-events: none;
      z-index: 2;
    }

:is(.sequence-loading-spinner.progression-determinate .spinner)::after {
      background: conic-gradient(
        from 0deg,
        var(--element-neutral-enhanced-color) 0deg,
        var(--element-neutral-enhanced-color) var(--spinner-progress-deg),
        transparent var(--spinner-progress-deg),
        transparent 360deg
      );
    }

:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-start,:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
      background: var(--element-neutral-enhanced-color);
    }

:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-start {
      transform: translate(-50%, -50%) rotate(0deg)
        translateY(calc(-1 * var(--spinner-radius)));
    }

:is(.sequence-loading-spinner.progression-determinate .spinner) .cap-end {
      transform: translate(-50%, -50%) rotate(var(--spinner-progress-deg))
        translateY(calc(-1 * var(--spinner-radius)));
    }

:is(.sequence-loading-spinner.progression-determinate:is(.progress-empty,.progress-full) .spinner) .cap-start,:is(.sequence-loading-spinner.progression-determinate:is(.progress-empty,.progress-full) .spinner) .cap-end {
      opacity: 0;
    }

.sequence-loading-spinner.progression-scanning .spinner {
    animation: loading-spin var(--spinner-rotation-duration, 1000ms) linear
      infinite;
  }

:is(.sequence-loading-spinner.progression-scanning .spinner)::after {
      background: conic-gradient(
        from 90deg,
        var(--element-disabled-color) 0deg,
        var(--element-disabled-color) 135deg,
        var(--element-disabled-color) 136deg,
        color-mix(
            in srgb,
            var(--base-blue-500) 20%,
            var(--element-disabled-color)
          )
          207deg,
        color-mix(
            in srgb,
            var(--base-blue-500) 45%,
            var(--element-disabled-color)
          )
          276deg,
        color-mix(
            in srgb,
            var(--base-blue-500) 96%,
            var(--element-disabled-color)
          )
          331deg,
        var(--base-blue-500) 360deg
      );
    }

.sequence-loading-spinner.progression-scanning .spinner {

    --spinner-scanning-head-deg: 90deg;
  }

:is(.sequence-loading-spinner.progression-scanning .spinner) .cap-start {
      background: var(--base-blue-500);
      transform: translate(-50%, -50%) rotate(var(--spinner-scanning-head-deg))
        translateY(calc(-1 * var(--spinner-radius)));
    }

:is(.sequence-loading-spinner.progression-scanning .spinner) .cap-end {
      opacity: 0;
    }

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}
`;
export {
  componentStyle as default
};
//# sourceMappingURL=sequence-loading-spinner.css.js.map
