/* ---------------------------------
-----  dimension variables --------
---------------------------------- */
/* ------  standard elements padding & margin  ------- */
/* spacing */
/**
**  Official Font sizes
------------------------------- */
/**
** Line-heights
------------------------------- */
/*
  Mixin to progressively-enhance :focus-visible, keeping :focus where not supported
  Add an arbitrary list of selectors into the arguments, and the styling in the block.
  I you pass no selectors to the mixin the parent ("ampersand") operator is used instead.

  There are two mixins:
  - focus-visible: a generic focus-visible, giving you "slots" to decide what to render for :focus, :focus reset, and :focus-visible
  - focus-visible-outline: a focus-visible, which only resets the outline. If you don't need more custom resets, use this one!

  Use focus-visible:
  The key thing here is checking which slot is being rendered.
  For example, you can reset box-shadow here, or anything else.

  @include focus-visible using ($slot) {
      @if $slot == focus {
          outline: 2px solid transparent;
          box-shadow: 0 0 0 4px blue;
      }
      @if $slot == focusReset {
          box-shadow: none;
      }
      @if $slot == focusVisible {
          box-shadow: 0 0 0 4px blue;
      }
  }

  Use focus-visible-outline:
  @include focus-visible-outline("button", "a[href]") {
      outline: 2px solid blue;
  }

  Resulting CSS (compressed):

  button:focus,
  a[href]:focus {
      outline: 2px solid blue;
  }

  button:focus:not(:focus-visible),
  a[href]:focus:not(:focus-visible) {
      outline: none;
  }
  button:focus-visible,
  a[href]:focus-visible {
      outline: 2px solid blue;
  }
*/
/**
@prop --ux-input-height: the height of the field itself (without labels)
@prop --ux-input-font-size: font-size of the input
@prop --ux-input-font-weight: font-weight of the input
@prop --ux-input-line-height: line-height of the input
@prop --ux-input-padding-horizontal: horizontal inner padding
@prop --ux-input-padding-vertical: vertical inner padding
@prop --ux-input-padding: combined vertical and horizontal padding
@prop --ux-input-spacing: spacing between field elements
@prop --ux-input-outline-width: outline thickness used when the field has focus
@prop --ux-input-border-width: border thickness of the input
@prop --ux-input-border-color: border-color of the input
@prop --ux-input-error-color: text color of the input in error state
@prop --ux-input-error-border-color: border-color of the input in error state
@prop --ux-input-placeholder-color: color of the placeholder text
@prop --ux-input-placeholder-font-weight: font-weight of the placeholder text
@prop --ux-input-focus-border-color: border-color of the input when focussed
@prop --ux-input-focus-text-color: text color of the input when focussed
@prop --ux-input-hover-bg: background-color of the input when hovered
@prop --ux-input-hover-border-color: border-color of the input when hovered
@prop --ux-input-hover-text-color: text color of the input when hovered
@prop --ux-input-active-bg: background-color of the input when active
@prop --ux-input-active-border-color: border-color of the input when active
@prop --ux-input-active-text-color: text color of the input when active
@prop --ux-input-disabled-bg: background-color when disabled
@prop --ux-input-disabled-border-color: border-color when disabled
@prop --ux-input-disabled-text-color: text color when disabled
@prop --ux-input-disabled-opacity: opacity of the input when disabled
@prop --ux-input-hint-margin: outer margin of the hint block below the input
@prop --ux-input-hint-color: color of the hint text
@prop --ux-input-hint-font-size: font-size of the hint text
@prop --ux-input-hint-font-weight: font-weight of the hint text
@prop --ux-input-hint-line-height: line-height of the hint text
@prop --ux-input-icon-size: size of the icon displayed inside the field
@prop --ux-input-label-color: color of the label text
@prop --ux-input-label-font-size: font-size of the label text
@prop --ux-input-label-font-weight: font-weight of the label text
@prop --ux-input-label-line-height: line-height of the label text
@prop --ux-input-label-padding: padding of the label text
@prop --ux-input-label-margin: margin of the label text
@prop --ux-input-icon-padding: padding of the icon in the icon slot
 */
:host(ux-input) {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  max-width: 100%;
  position: relative;
}

:host([type=hidden]) {
  display: none;
}

input {
  box-sizing: border-box !important;
  display: inline-block;
  width: 100%;
  background-color: transparent;
  border: 0 none transparent;
  color: inherit;
  flex: 1 1 auto;
  font-family: var(--ux-font) !important;
  font-size: var(--ux-input-font-size) !important;
  font-weight: var(--ux-input-font-weight);
  height: 100%;
  line-height: var(--ux-input-line-height);
  padding: var(--ux-input-padding);
}
:host([disabled]:not([disabled=false])) input {
  background: var(--ux-input-disabled-bg);
  border-color: var(--ux-input-disabled-border-color);
  color: var(--ux-input-disabled-text-color);
}
:host(:invalid) input {
  color: var(--ux-input-error-color);
}

input:focus,
input:focus-visible {
  outline: 0;
}

input::placeholder {
  color: var(--ux-input-placeholder-color);
  font-weight: var(--ux-input-placeholder-font-weight);
}

.controls {
  width: 100%;
  background: var(--ux-input-background-color);
  border: var(--ux-input-border-width) solid var(--ux-input-border-color);
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: nowrap;
  height: var(--ux-input-height);
  position: relative;
  order: var(--ux-input-controls-order);
}
.controls:hover {
  background: var(--ux-input-hover-bg);
  border-color: var(--ux-input-hover-border-color);
  color: var(--ux-input-hover-text-color);
}
.controls:active {
  background: var(--ux-input-active-bg);
  border-color: var(--ux-input-active-border-color);
  color: var(--ux-input-active-text-color);
}
:host([focused]) .controls {
  color: var(--ux-input-focus-text-color);
  outline: var(--ux-input-outline-width) solid var(--ux-input-focus-border-color);
  outline-offset: var(--ux-input-outline-offset);
}
:host(:invalid) .controls {
  border-color: var(--ux-input-error-border-color);
}
:host([disabled]:not([disabled=false])) .controls {
  border-color: var(--ux-input-disabled-border-color);
  opacity: var(--ux-input-disabled-opacity);
}
.controls.has-unit input {
  text-align: right;
  padding-right: var(--ux-input-unit-padding-right);
  order: 2;
}
.controls.has-unit .icon,
.controls.has-unit .clear {
  order: 1;
}
.controls.has-unit .unit {
  order: 3;
}
:host(:invalid) .controls.has-unit .unit {
  --ux-input-unit-color: var(--ux-input-error-color);
  --ux-input-unit-divider-color: var(--ux-input-error-border-color);
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ux-input-icon-size);
}

slot[name=icon]::slotted(*) {
  padding: var(--ux-input-icon-padding);
}

label {
  display: inline-block;
  font-family: var(--ux-font);
  font-size: var(--ux-input-label-font-size);
  font-weight: var(--ux-input-label-font-weight);
  line-height: var(--ux-input-label-line-height);
  margin: var(--ux-input-label-margin);
  padding: var(--ux-input-label-padding);
  text-transform: var(--ux-input-label-text-transform);
  vertical-align: middle;
  order: 1;
}
label slot:empty {
  display: none;
}

.hint {
  order: var(--ux-input-hint-order);
  font-size: var(--ux-input-hint-font-size);
  color: var(--ux-input-hint-color);
  margin: var(--ux-input-hint-margin);
  font-weight: var(--ux-input-hint-font-weight);
  line-height: var(--ux-input-hint-line-height);
}

.error-message {
  order: var(--ux-input-hint-order);
}

.required::before {
  content: var(--ux-input-label-required-symbol);
  display: inline;
}

.clear {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: normal;
  overflow: visible;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: var(--ux-input-icon-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: opacity 0.2s ease-in-out;
}
.clear ux-icon {
  font-size: var(--ux-input-clearable-size);
}