/**
  ---DO NOT EDIT THIS FILE DIRECTLY---
  This CSS file was concatenated from files listed in the css/ folder as part of a build process
  This is to allow for js import with @import links which will not be followed
**/

/* src/primitives/input/css/definition/content/input.css */
@layer input.definition.content.input {
  * {
    box-sizing: border-box;
  }
  .input {
    cursor: text;
    display: inline-flex;
    position: relative;
    font-style: normal;
    font-weight: var(--input-font-weight);
    width: inherit;
    font-family: var(--input-font-family);
    line-height: var(--input-line-height);
    color: var(--input-text-color);
    background: var(--input-background);
    border: var(--input-border);
    border-radius: var(--input-border-radius);
    transition: var(--input-transition);
    box-shadow: var(--input-box-shadow);
    gap: var(--input-item-spacing);
    text-align: var(--input-text-align);
    align-items: center;
  }
  .input input {
    width: var(--input-width);
    padding: var(--input-padding);
    background-color: transparent;
    margin: 0em;
    border-radius: inherit;
    outline: none;
    max-width: 100%;
    flex: 1 0 auto;
    text-align: inherit;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    border: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    z-index: var(--page-layer-1);
  }
  .input input::placeholder {
    color: var(--input-placeholder-color);
  }
  .input .icon {
    position: absolute;
    z-index: var(--input-icon-index);
    right: var(--input-icon-right);
    width: var(--input-icon-width);
    pointer-events: none;
    margin: 0rem;
  }
  .input .icon.clickable {
    pointer-events: auto;
    cursor: pointer;
  }
  .input .icon + .label {
    right: var(--input-label-with-icon-right);
  }
  .input .label {
    position: absolute;
    z-index: var(--page-layer-2);
    pointer-events: none;
    right: var(--input-label-right);
    display: inline-block;
    text-wrap: nowrap;
    margin-left: auto;
    line-height: 1;
    font-weight: var(--input-label-font-weight);
    color: var(--input-label-color);
    font-size: var(--input-label-font-size);
    padding: var(--input-label-padding);
    border: var(--input-label-border);
    border-radius: var(--input-label-border-radius);
  }
}

/* src/primitives/input/css/definition/types/search.css */
@layer input.definition.types.search {
  .search.input {
    border-radius: var(--circular-radius);
  }
}

/* src/primitives/input/css/definition/states/focused.css */
@layer input.definition.states.focus {
  .input.focus,
  .input:focus-within {
    border-color: var(--input-focused-border-color);
    background: var(--input-focused-background);
    color: var(--input-focused-color);
    box-shadow: var(--input-focused-box-shadow);
  }
  .input:focus-within > input::placeholder,
  .input.focus > input::placeholder {
    color: var(--input-placeholder-focused-color);
  }
}

/* src/primitives/input/css/definition/states/loading.css */
@layer input.definition.states.loading {
  .loading.input:not(.icon) {
    position: relative;
    cursor: default;
    text-shadow: none !important;
    color: transparent !important;
    opacity: var(--input-loading-opacity);
    pointer-events: auto;
    transition: var(--input-loading-transition);
  }
  .loading.icon.input .icon {
    position: relative;
    color: transparent !important;
  }
  .loading.icon.input > .icon:before,
  .loading.input:not(.icon)::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    margin: var(--loader-margin);
    width: var(--loader-size);
    height: var(--loader-size);
    border-radius: var(--circular-radius);
    border: var(--loader-line-width) solid var(--loader-fill-color);
  }
  .loading.icon.input > .icon:after,
  .loading.input:not(.icon)::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    margin: var(--loader-margin);
    width: var(--loader-size);
    height: var(--loader-size);
    animation: input-spin var(--loader-speed) linear;
    animation-iteration-count: infinite;
    border-radius: var(--circular-radius);
    border-color: var(--loader-line-color) transparent transparent;
    border-style: solid;
    border-width: var(--loader-line-width);
    box-shadow: 0px 0px 0px 1px transparent;
  }
  @keyframes input-spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  .loading.input.inverted .icon:before,
  .loading.input.inverted:before {
    border-color: var(--inverted-loader-fill-color);
  }
  .loading.input.inverted .icon:after,
  .loading.input.inverted:after {
    border-top-color: var(--inverted-loader-line-color);
  }
}

/* src/primitives/input/css/definition/states/disabled.css */
@layer input.definition.states.disabled {
  .disabled.input,
  .disabled.input:hover,
  .disabled.active.input {
    cursor: var(--input-disabled-cursor);
    opacity: var(--input-disabled-opacity) !important;
    color: var(--input-disabled-color);
    background-color: var(--input-disabled-background-color) !important;
    background-image: var(--input-disabled-background-image) !important;
    box-shadow: var(--input-disabled-box-shadow) !important;
  }
  ui-input[disabled] {
    cursor: var(--input-disabled-cursor);
    pointer-events: none !important;
  }
  .clickable-disabled.input {
    pointer-events: auto !important;
    cursor: var(--input-clickable-disabled-cursor) !important;
  }
  .clickable-disabled.input:active {
    box-shadow: var(--input-pressed-box-shadow) !important;
  }
  ui-input[clickable-disabled] {
    pointer-events: auto !important;
    cursor: var(--input-clickable-disabled-cursor) !important;
  }
}

/* src/primitives/input/css/definition/variations/sizing.css */
@layer input.definition.variations.sizing {
  .mini {
    font-size: var(--input-mini);
  }
  .tiny {
    font-size: var(--input-tiny);
  }
  .small {
    font-size: var(--input-small);
  }
  :host {
    font-size: var(--input-medium);
  }
  .large {
    font-size: var(--input-large);
  }
  .big {
    font-size: var(--input-big);
  }
  .huge {
    font-size: var(--input-huge);
  }
  .massive {
    font-size: var(--input-massive);
  }
}

/* src/primitives/input/css/definition/variations/fluid.css */
@layer input.definition.variations.fluid {
  .fluid {
    display: flex;
    flex-grow: 1;
    max-width: 100%;
  }
  .fluid input {
    width: 100%;
  }
}

/* src/primitives/input/css/definition/input-definition.css */

/* src/primitives/input/css/theme/content/input-variables.css */
@layer input.theme.content.input {
  :host {
    --input-background: var(--inverted-100);
    --input-width: 12em;
    --input-font-family: var(--page-font);
    --input-font-weight: var(--normal);
    --input-text-color: var(--text-color);
    --input-line-height: var(--relative-17px);
    --input-text-align: left;
    --input-box-shadow: var(--subtle-inset-shadow);
    --input-border: var(--border);
    --input-border-radius: var(--border-radius);
    --input-item-spacing: 5px;
    --input-placeholder-color: var(--standard-15);
    --input-placeholder-focused-color: var(--standard-20);
    --input-transition: box-shadow var(--duration) var(--easing), border-color var(--duration) var(--easing) ;
    --input-icon-right: var(--input-horizontal-padding);
    --input-icon-width: 1em;
    --input-icon-index: var(--page-layer-2);
    --input-label-right: var(--input-horizontal-padding);
    --input-label-font-size: var(--relative-11px);
    --input-label-font-weight: var(--bold);
    --input-label-padding: var(--relative-2px) var(--relative-3px);
    --input-label-color: var(--standard-20);
    --input-label-border: var(--border);
    --input-label-border-radius: var(--border-radius);
    --input-label-with-icon-right: calc( 1em + var(--input-icon-width) + var(--input-icon-right) );
  }
}

/* src/primitives/input/css/theme/types/search-variables.css */
@layer input.theme.types.search {
  :host {
    --inputSearchBorderRadius: var(--circular-radius);
  }
}

/* src/primitives/input/css/theme/states/disabled-variables.css */
@layer input.theme.states.disabled {
  :host {
    --input-disabled-cursor: default;
    --input-disabled-opacity: 1;
    --input-disabled-background-color: var(--standard-0);
    --input-disabled-background-image: var(--button-background-image);
    --input-disabled-border-box-shadow: 0px 0px 0px var(--button-border-width) rgba(0, 0, 0, 0.1) inset;
    --input-disabled-shadow-box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.04);
    --input-disabled-color: var(--black-20);
    --input-disabled-box-shadow:
      var(--button-sharpen-box-shadow),
      var(--button-disabled-border-box-shadow),
      var(--button-disabled-shadow-box-shadow) ;
    --input-clickable-disabled-cursor: not-allowed;
  }
}

/* src/primitives/input/css/theme/states/loading-variables.css */
@layer input.theme.states.loading {
  :host {
    --button-loading-icon-duration: 2s;
    --button-loading-opacity: 1;
    --button-loading-transition: opacity var(--button-transition-duration) var(--button-transition-easing) ;
  }
}

/* src/primitives/input/css/theme/states/focused-variables.css */
@layer input.theme.states.focused {
  :host {
    --input-focused-border-color: var(--form-focused-border-color);
    --input-focused-background: var(--input-background);
    --input-focused-color: var(--input-text-color);
    --input-focused-placeholder-color: var(--white-15);
    --input-focused-box-shadow: none;
    --input-placeholder-focused-color: var(--standard-20);
  }
}

/* src/primitives/input/css/theme/variations/aligned-variables.css */
@layer input.theme.variations.aligned {
  :host {
  }
}

/* src/primitives/input/css/theme/variations/sizing-variables.css */
@layer input.theme.variations.sizing {
  :host {
    --input-mini: var(--mini);
    --input-tiny: var(--tiny);
    --input-small: var(--small);
    --input-medium: inherit;
    --input-large: var(--large);
    --input-big: var(--big);
    --input-huge: var(--huge);
    --input-massive: var(--massive);
  }
}

/* src/primitives/input/css/theme/input-theme.css */

/* src/primitives/input/css/input.css */