/* forms */
@layer theme {
  :root {
    --ds-input-border: var(--ds-grey-medium);
    --ds-input-space: var(--ds-space);
    --ds-input-font: var(--ds-font-family);
    --ds-input-radio-space: 0.2em;
    --ds-input-height: calc(var(--ds-line-height) * 1.5);
    --ds-input-margin: calc(var(--ds-line-height) * 0.5);
  }
}
@layer base {
  .ds-form-group {
    margin: var(--ds-input-space) 0;
  }
  .ds-form-line {
    display: flex;
  }
  .ds-form-help {
    margin-top: calc(-1 * var(--ds-input-margin));
    height: var(--ds-input-margin);
  }
  .ds-form-buttons {
    display: flex;
  }
  label {
    display: block;
    margin: var(--ds-input-space) 0;
  }
  .ds-input, 
  input:not([type="radio"],[type="checkbox"]), 
  select {
    width: 100%;
    display: block;
    height: var(--ds-input-height);
    margin: 0;
    margin-bottom: var(--ds-input-margin);
    box-sizing: border-box;
    background: inherit;
    color: inherit;
    border: 0px;
    outline: 1px solid var(--ds-input-border);
    padding: 0 0.5em;
    font-family: var(--ds-input-font);
    font-size: inherit;
    line-height: inherit;
  }
  select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgaGVpZ2h0PSIyMHB4Ij4KPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPgo8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3ICAgIGMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2ICAgIGMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right 1em center;
  }
  select[multiple] {
    height: auto; /* unset? */
    -webkit-appearance: menulist;
    -moz-appearance: menulist; 
    appearance: menulist; 
  }
  .ds-textarea,
  textarea {
    width: 100%;
    border: 0;
    outline: 1px solid var(--ds-input-border);
    padding: 0 0.5em;
    font-family: var(--ds-input-font);
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    height: calc(3 * var(--ds-input-height));
    margin-bottom: var(--ds-input-margin);
    display: block;
  }
  input[type="radio"],
  input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
  }
  .ds-form-radio label {
    margin: 0;
  }

}