/* [project]/packages/one-ui/dist/style.css [client] (css) */
.one-btn {
  cursor: pointer;
  border-radius: var(--one-ui-border-radius-base);
  font-weight: var(--one-ui-button-font-weight);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-duration: .2s;
}

.one-btn-anchor {
  align-items: center;
  display: inline-flex;
}

.one-btn[disabled], .one-btn[data-disabled] {
  cursor: not-allowed;
}

.one-btn-primary {
  background-color: rgb(var(--one-ui-primary));
}

.one-btn-primary:hover {
  background-color: rgb(var(--one-ui-primary-hover));
}

.one-btn-primary {
  border-color: rgb(var(--one-ui-primary));
}

.one-btn-primary:hover {
  border-color: rgb(var(--one-ui-primary-hover));
}

.one-btn-primary[disabled], .one-btn-primary[data-disabled] {
  border-color: rgb(var(--one-ui-bg-disabled));
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-btn-secondary {
  background-color: rgb(var(--one-ui-secondary));
}

.one-btn-secondary:hover {
  background-color: rgb(var(--one-ui-secondary-hover));
}

.one-btn-secondary {
  border-color: rgb(var(--one-ui-secondary));
}

.one-btn-secondary:hover {
  border-color: rgb(var(--one-ui-secondary-hover));
}

.one-btn-secondary[disabled], .one-btn-secondary[data-disabled] {
  border-color: rgb(var(--one-ui-bg-disabled));
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-btn-outline {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: rgb(var(--one-ui-primary));
}

.one-btn-outline:hover {
  color: rgb(var(--one-ui-primary-hover));
}

.one-btn-outline {
  border-color: rgb(var(--one-ui-primary));
}

.one-btn-outline:hover {
  border-color: rgb(var(--one-ui-primary-hover));
}

.one-btn-outline[disabled], .one-btn-outline[data-disabled] {
  border-color: rgb(var(--one-ui-bg-disabled));
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-btn-outline-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  color: rgb(var(--one-ui-primary));
}

.one-btn-outline-primary:hover {
  background-color: rgb(var(--one-ui-primary));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.one-btn-outline-primary {
  border-color: rgb(var(--one-ui-primary));
}

.one-btn-outline-primary[disabled], .one-btn-outline-primary[data-disabled] {
  border-color: rgb(var(--one-ui-bg-disabled));
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-btn-xl {
  border-width: 2px;
  height: 5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 28px;
}

.one-btn-lg {
  border-width: 2px;
  height: 4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 2.25rem;
}

.one-btn-md {
  border-width: 2px;
  height: 3.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1.25rem;
  line-height: 2rem;
}

.one-btn-sm {
  border-width: 2px;
  height: 3rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

.one-btn-xs {
  border-width: 1px;
  height: 2rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: .875rem;
  line-height: 1.375rem;
}

.one-btn-with-icon img, .one-btn-with-icon svg {
  vertical-align: baseline;
  display: inline-block;
}

.one-btn-with-icon:not(.one-btn-anchor) img, .one-btn-with-icon:not(.one-btn-anchor) svg {
  vertical-align: sub;
  display: inline-block;
}

.one-btn-block {
  width: 100%;
}

.one-btn-rounded-full {
  border-radius: 9999px;
}

.one-input-affix-wrapper {
  letter-spacing: .025em;
  border-radius: var(--one-ui-border-radius-base);
  border-width: 1px;
  border-color: rgb(var(--one-ui-border-color-base));
  background-color: #fff;
  background-image: none;
  width: 100%;
  min-width: 0;
  padding: 11px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  transition: all .3s;
  display: inline-flex;
  position: relative;
}

.one-input-affix-wrapper::placeholder {
  color: rgb(var(--one-ui-text-placeholder));
}

.one-input-affix-wrapper:hover {
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: .5;
}

.one-input-affix-wrapper:active {
  outline: none;
}

.one-input-affix-wrapper:focus, .one-input-affix-wrapper-focused {
  box-shadow: 0 0 0 2px rgb(var(--one-ui-primary) / 15%);
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: 1;
  outline: none;
}

.one-input-affix-wrapper[disabled], .one-input-affix-wrapper-disabled {
  cursor: not-allowed;
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper[disabled]::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper-disabled::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper[disabled]::placeholder, .one-input-affix-wrapper-disabled::placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled {
  border-color: rgb(var(--one-ui-bg-filled));
  background-color: rgb(var(--one-ui-bg-filled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled:hover {
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: .5;
  background-color: #0000;
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled:focus, .one-input-affix-wrapper.one-input-affix-wrapper-filled-focused {
  box-shadow: 0 0 0 2px rgb(var(--one-ui-primary) / 15%);
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: 1;
  background-color: #0000;
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled[disabled], .one-input-affix-wrapper.one-input-affix-wrapper-filled-disabled {
  border-color: rgb(var(--one-ui-border-color-base));
  cursor: not-allowed;
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled[disabled]::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled-disabled::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled[disabled]::placeholder, .one-input-affix-wrapper.one-input-affix-wrapper-filled-disabled::placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper-lg {
  padding: 17px 11px;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.one-input-affix-wrapper-sm {
  padding: 6px 11px;
  font-size: .875rem;
  line-height: 1.375rem;
}

.one-input-affix-wrapper:not(.one-input-affix-wrapper-disabled):hover {
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: .5;
  z-index: 1;
}

.one-input-search-with-button .one-input-affix-wrapper:not(.one-input-affix-wrapper-disabled):hover {
  z-index: 0;
}

.one-input-affix-wrapper-focused, .one-input-affix-wrapper:focus {
  z-index: 1;
}

.one-input-affix-wrapper-disabled .one-input[disabled] {
  background: none;
}

.one-input-affix-wrapper > input.one-input {
  border: none;
  outline: none;
  padding: 0;
}

.one-input-affix-wrapper > input.one-input:focus {
  box-shadow: none !important;
}

.one-input-affix-wrapper:before {
  visibility: hidden;
  content: " ";
  width: 0;
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled {
  background-color: rgb(var(--one-ui-bg-filled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled > input.one-input {
  background-color: #0000;
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled.one-input-affix-wrapper-disabled {
  border-color: rgb(var(--one-ui-border-color-base));
  cursor: not-allowed;
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-affix-wrapper.one-input-affix-wrapper-filled.one-input-affix-wrapper-disabled::placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-prefix, .one-input-suffix {
  flex: none;
  align-items: center;
  display: flex;
}

.one-input-prefix > :not(:last-child), .one-input-suffix > :not(:last-child) {
  margin-right: 8px;
}

.one-input-show-count-suffix {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}

.one-input-show-count-has-suffix {
  margin-right: 2px;
}

.one-input-prefix {
  margin-right: 4px;
}

.one-input-suffix {
  margin-left: 4px;
}

.one-input-clear-icon {
  vertical-align: -1px;
  cursor: pointer;
  color: rgb(var(--one-ui-text-placeholder));
  margin: 0;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.375rem;
  transition: color .3s;
}

.one-input-clear-icon:hover {
  color: rgb(var(--one-ui-text-color-secondary));
}

.one-input-clear-icon:active {
  color: rgb(var(--one-ui-text-color));
}

.one-input-clear-icon-hidden {
  visibility: hidden;
}

.one-input-clear-icon-has-suffix {
  margin: 0 4px;
}

.one-input-status-error:not(.one-input-disabled):not(.one-input-borderless).one-input, .one-input-status-error:not(.one-input-disabled):not(.one-input-borderless).one-input:hover {
  border-color: rgb(var(--one-ui-error));
}

.one-input-status-error:not(.one-input-disabled):not(.one-input-borderless).one-input:focus, .one-input-status-error:not(.one-input-disabled):not(.one-input-borderless).one-input-focused {
  box-shadow: 0 0 0 2px rgb(var(--one-ui-error) / 15%);
  border-width: 1px;
  border-color: rgb(var(--one-ui-error));
  --tw-border-opacity: 1;
}

.one-input-affix-wrapper-status-error:not(.one-input-affix-wrapper-disabled):not(.one-input-affix-wrapper-borderless).one-input-affix-wrapper, .one-input-affix-wrapper-status-error:not(.one-input-affix-wrapper-disabled):not(.one-input-affix-wrapper-borderless).one-input-affix-wrapper:hover {
  border-color: rgb(var(--one-ui-error));
}

.one-input-affix-wrapper-status-error:not(.one-input-affix-wrapper-disabled):not(.one-input-affix-wrapper-borderless).one-input-affix-wrapper:focus, .one-input-affix-wrapper-status-error:not(.one-input-affix-wrapper-disabled):not(.one-input-affix-wrapper-borderless).one-input-affix-wrapper-focused {
  box-shadow: 0 0 0 2px rgb(var(--one-ui-error) / 15%);
  border-width: 1px;
  border-color: rgb(var(--one-ui-error));
  --tw-border-opacity: 1;
}

.one-input.one-input-filled.one-input-status-error, .one-input-affix-wrapper.one-input-affix-wrapper-filled.one-input-affix-wrapper-status-error:not(.one-input-affix-wrapper-disabled) {
  background-color: initial;
}

.one-input {
  letter-spacing: .025em;
  border-radius: var(--one-ui-border-radius-base);
  border-width: 1px;
  border-color: rgb(var(--one-ui-border-color-base));
  background-color: #fff;
  background-image: none;
  width: 100%;
  min-width: 0;
  padding: 11px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  transition: all .3s;
  display: inline-block;
  position: relative;
}

.one-input::placeholder {
  color: rgb(var(--one-ui-text-placeholder));
}

.one-input:hover {
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: .5;
}

.one-input:active {
  outline: none;
}

.one-input:focus, .one-input-focused {
  box-shadow: 0 0 0 2px rgb(var(--one-ui-primary) / 15%);
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: 1;
  outline: none;
}

.one-input[disabled], .one-input-disabled {
  cursor: not-allowed;
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-input[disabled]::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-disabled::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input[disabled]::placeholder, .one-input-disabled::placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input.one-input-filled {
  border-color: rgb(var(--one-ui-bg-filled));
  background-color: rgb(var(--one-ui-bg-filled));
}

.one-input.one-input-filled:hover {
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: .5;
  background-color: #0000;
}

.one-input.one-input-filled:focus, .one-input.one-input-filled-focused {
  box-shadow: 0 0 0 2px rgb(var(--one-ui-primary) / 15%);
  border-width: 1px;
  border-color: rgb(var(--one-ui-primary));
  --tw-border-opacity: 1;
  background-color: #0000;
}

.one-input.one-input-filled[disabled], .one-input.one-input-filled-disabled {
  border-color: rgb(var(--one-ui-border-color-base));
  cursor: not-allowed;
  background-color: rgb(var(--one-ui-bg-disabled));
  color: rgb(var(--one-ui-text-disabled));
}

.one-input.one-input-filled[disabled]::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input.one-input-filled-disabled::-moz-placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input.one-input-filled[disabled]::placeholder, .one-input.one-input-filled-disabled::placeholder {
  color: rgb(var(--one-ui-text-disabled));
}

.one-input-lg {
  padding: 17px 11px;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.one-input-sm {
  padding: 6px 11px;
  font-size: .875rem;
  line-height: 1.375rem;
}

.one-text-field {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  letter-spacing: .025em;
  border-radius: var(--one-ui-border-radius-base);
  font-weight: 600;
  display: inline-block;
  position: relative;
}

.one-text-field .one-input, .one-text-field .one-input-affix-wrapper, .one-text-field .one-input:hover, .one-text-field .one-input-affix-wrapper:hover {
  box-shadow: unset;
  background: none;
  border-color: #0000;
}

.one-text-field label {
  pointer-events: none;
  color: rgb(var(--one-ui-text-placeholder));
  transform-origin: 0 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  z-index: 1;
  padding: 0 4px;
  transition: color .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1), max-width .2s cubic-bezier(0, 0, .2, 1);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.one-text-field fieldset {
  border-radius: var(--one-ui-border-radius-base);
  border-style: solid;
  border-width: 1px;
  border-color: rgb(var(--one-ui-border-color-base));
  pointer-events: none;
  text-align: left;
  min-width: 0%;
  margin: 0;
  padding: 0 7px;
  position: absolute;
  inset: -5px 0 0;
  overflow: hidden;
}

.one-text-field fieldset legend {
  float: unset;
  visibility: hidden;
  white-space: nowrap;
  width: auto;
  max-width: 0;
  height: 10px;
  padding: 0;
  font-size: .78em;
  transition: max-width 50ms cubic-bezier(0, 0, .2, 1);
  display: block;
  overflow: hidden;
}

.one-text-field fieldset legend span {
  opacity: 0;
  visibility: visible;
  padding-left: .25rem;
  padding-right: .25rem;
  display: inline-block;
}

.one-text-field:focus-within label, .one-text-field.one-text-field-filled label {
  max-width: calc(133% - 24px);
}

.one-text-field:focus-within fieldset legend, .one-text-field.one-text-field-filled fieldset legend {
  max-width: 100%;
}

.one-text-field-with-label > .one-input::-moz-placeholder {
  opacity: 0;
  transition: opacity .2s cubic-bezier(0, 0, .2, 1);
}

.one-text-field-with-label > .one-input-affix-wrapper > .one-input::-moz-placeholder {
  opacity: 0;
  transition: opacity .2s cubic-bezier(0, 0, .2, 1);
}

.one-text-field-with-label > .one-input::placeholder, .one-text-field-with-label > .one-input-affix-wrapper > .one-input::placeholder {
  opacity: 0;
  transition: opacity .2s cubic-bezier(0, 0, .2, 1);
}

.one-text-field-with-label.one-text-field:focus-within > .one-input::-moz-placeholder {
  opacity: 1;
}

.one-text-field-with-label.one-text-field:focus-within > .one-input-affix-wrapper > .one-input::-moz-placeholder {
  opacity: 1;
}

.one-text-field-with-label.one-text-field:focus-within > .one-input::placeholder, .one-text-field-with-label.one-text-field:focus-within > .one-input-affix-wrapper > .one-input::placeholder {
  opacity: 1;
}

.one-text-field-with-label.one-text-field-filled > .one-input::-moz-placeholder {
  opacity: 1;
}

.one-text-field-with-label.one-text-field-filled > .one-input-affix-wrapper > .one-input::-moz-placeholder {
  opacity: 1;
}

.one-text-field-with-label.one-text-field-filled > .one-input::placeholder, .one-text-field-with-label.one-text-field-filled > .one-input-affix-wrapper > .one-input::placeholder {
  opacity: 1;
}

.one-text-field-with-prefix > .one-input-affix-wrapper > .one-input-prefix {
  opacity: 0;
  transition: opacity .2s cubic-bezier(0, 0, .2, 1);
}

.one-text-field-with-prefix.one-text-field:focus-within > .one-input-affix-wrapper > .one-input-prefix, .one-text-field-with-prefix.one-text-field-filled > .one-input-affix-wrapper > .one-input-prefix {
  opacity: 1;
}

.one-text-field-normal label {
  font-size: 1.125rem;
  line-height: 1.75rem;
  transform: translate(9px, 17.5px)scale(1);
}

.one-text-field-normal fieldset {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.one-text-field-normal.one-text-field:focus-within label, .one-text-field-normal.one-text-field.one-text-field-filled label {
  transform: translate(9px, -11px)scale(.78);
}

.one-text-field-small label {
  font-size: 1rem;
  line-height: 1.5rem;
  transform: translate(9px, 12px)scale(1);
}

.one-text-field-small fieldset {
  font-size: 1rem;
  line-height: 1.5rem;
}

.one-text-field-small.one-text-field:focus-within label, .one-text-field-small.one-text-field.one-text-field-filled label {
  transform: translate(9px, -9px)scale(.78);
}

:root {
  --one-ui-primary: 38 188 94;
  --one-ui-primary-hover: 0 173 65;
  --one-ui-secondary: 140 121 255;
  --one-ui-secondary-hover: 106 81 255;
  --one-ui-error: 202 2 11;
  --one-ui-text-primary: 32 33 36;
  --one-ui-text-secondary: 85 85 85;
  --one-ui-text-placeholder: 153 153 153;
  --one-ui-text-disabled: 206 206 206;
  --one-ui-bg-disabled: 246 247 248;
  --one-ui-bg-filled: 246 247 248;
  --one-ui-border-radius-base: 4px;
  --one-ui-border-color-base: 214 218 224;
  --one-ui-button-font-weight: 700;
}

.one-trigger {
  z-index: 830;
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.one-trigger-hidden {
  display: none;
}

.one-trigger-fade-enter, .one-trigger-fade-appear {
  opacity: 0;
  animation-duration: .24s;
  animation-timing-function: cubic-bezier(.55, .055, .675, .19);
  animation-play-state: paused;
  animation-fill-mode: both;
}

.one-trigger-fade-leave {
  animation-duration: .24s;
  animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  animation-play-state: paused;
  animation-fill-mode: both;
}

.one-trigger-fade-enter.one-trigger-fade-enter-active, .one-trigger-fade-appear.one-trigger-fade-appear-active {
  animation-name: oneTriggerFadeIn;
  animation-play-state: running;
}

.one-trigger-fade-leave.one-trigger-fade-leave-active {
  animation-name: oneTriggerFadeOut;
  animation-play-state: running;
}

@keyframes oneTriggerFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes oneTriggerFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}