.platform-input {
  --platform-input-height: 34px;
  box-sizing: border-box;
  min-width: 0;
  height: var(--platform-input-height);
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  outline: none;
  background: var(--platform-surface-raised, #121213);
  color: var(--platform-text-primary, #fff);
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    opacity 140ms ease;
}

:root[data-platform-theme="light"] .platform-input {
  border: 1px solid var(--platform-border-default, rgba(18, 18, 19, 0.05));
  background: var(--platform-surface-input, #fff);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.platform-input.is-full-width {
  width: 100%;
}

.platform-input.is-size-small {
  --platform-input-height: 28px;
}

.platform-input.is-size-large {
  --platform-input-height: 38px;
}

.platform-input::placeholder {
  color: var(--platform-text-tertiary);
}

.platform-input:hover:not(:disabled) {
  background: var(--platform-surface-raised, #121213);
}

.platform-input:focus {
  border-color: rgba(var(--platform-foreground-rgb, 255, 255, 255), 0.2);
  background: var(--platform-surface-raised, #121213);
}

:root[data-platform-theme="light"] .platform-input:hover:not(:disabled),
:root[data-platform-theme="light"] .platform-input:focus {
  background: var(--platform-surface-input, #fff);
}

.platform-input.is-invalid,
.platform-input[aria-invalid="true"] {
  border: 1px solid rgba(248, 113, 113, 0.72);
}

:root[data-platform-theme="light"] .platform-input.is-invalid,
:root[data-platform-theme="light"] .platform-input[aria-invalid="true"] {
  border-color: rgba(248, 113, 113, 0.72);
}

.platform-input:disabled {
  opacity: 0.5;
  cursor: default;
}

.platform-rotating-placeholder {
  display: grid;
  min-width: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.platform-rotating-placeholder__item {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.platform-rotating-placeholder__item.is-entering {
  animation: platform-placeholder-enter 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.platform-rotating-placeholder__item.is-leaving {
  animation: platform-placeholder-leave 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes platform-placeholder-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 75%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes platform-placeholder-leave {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -75%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-rotating-placeholder__item.is-entering {
    animation: none;
  }

  .platform-rotating-placeholder__item.is-leaving {
    display: none;
    animation: none;
  }
}

.platform-slider {
  --platform-slider-accent: #0088ff;
  --platform-slider-thumb-size: 28px;
  --platform-slider-track-height: 24px;
  position: relative;
  width: 100%;
  min-width: 0;
  height: 44px;
}

.platform-slider__track {
  position: absolute;
  inset: 50% 0 auto;
  height: var(--platform-slider-track-height);
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--platform-foreground-rgb, 255, 255, 255), 0.1);
  transform: translateY(-50%);
  pointer-events: none;
}

.platform-slider__fill {
  width: calc(var(--platform-slider-thumb-size) / 2 + (100% - var(--platform-slider-thumb-size)) * var(--platform-slider-progress));
  height: 100%;
  background: var(--platform-slider-accent);
}

.platform-slider__marks {
  position: absolute;
  inset: 50% calc(var(--platform-slider-thumb-size) / 2) auto;
  pointer-events: none;
}

.platform-slider__mark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--platform-foreground-rgb, 255, 255, 255), 0.4);
  transform: translate(-50%, -50%);
}

.platform-slider__input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.platform-slider__input:focus-visible {
  outline: 2px solid var(--platform-slider-accent);
  outline-offset: 2px;
}

.platform-slider__input::-webkit-slider-runnable-track {
  height: var(--platform-slider-track-height);
  border: 0;
  background: transparent;
}

.platform-slider__input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--platform-slider-thumb-size);
  height: var(--platform-slider-thumb-size);
  margin-top: calc((var(--platform-slider-track-height) - var(--platform-slider-thumb-size)) / 2);
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.platform-slider__input::-moz-range-track,
.platform-slider__input::-moz-range-progress {
  height: var(--platform-slider-track-height);
  border: 0;
  background: transparent;
}

.platform-slider__input::-moz-range-thumb {
  width: var(--platform-slider-thumb-size);
  height: var(--platform-slider-thumb-size);
  border: 0;
  border-radius: 50%;
  background: #fff;
}

.platform-slider.is-disabled {
  opacity: 0.5;
}

.platform-slider__input:disabled {
  cursor: default;
}

.platform-slider.is-continuous-drag .platform-slider__input:not(:disabled) {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.platform-slider.is-dragging .platform-slider__input:not(:disabled) {
  cursor: grabbing;
}