label {
	display: flex;
	flex-direction: column;
	font-size: var(--sl-input-label-font-size-medium);
	color: var(--sl-input-label-color);
    margin-bottom: var(--sl-spacing-3x-small);
}

.help-text.error {
	color: var(--error-red);
}

.help-text .errorlist {
	margin: 0px;
}


input {
	height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
	padding: 0 var(--sl-input-spacing-medium);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    min-width: 0px;
    color: var(--sl-input-color);
    border: none;
    background: none;
    box-shadow: none;
    margin: 0px;
    cursor: inherit;
    appearance: none;
	border-radius: var(--sl-input-border-radius-medium);
    font-size: var(--sl-input-font-size-medium);
    height: var(--sl-input-height-medium);
	border: solid var(--sl-input-border-width) var(--sl-input-border-color);
	flex: 1 1 auto;
    display: inline-flex;
    align-items: stretch;
    justify-content: start;
    position: relative;
    font-family: var(--sl-input-font-family);
    font-weight: var(--sl-input-font-weight);
    letter-spacing: var(--sl-input-letter-spacing);
    vertical-align: middle;
    overflow: hidden;
    cursor: text;
    /* transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) background-color; */
}

input:hover { 
	color: var(--sl-color-neutral-700);
	/* border-color: var(--sl-color-neutral-400); */
	background-color: var(--sl-input-background-color-hover);
    border-color: var(--sl-input-border-color-hover);
}
input:focus-visible { 
	color: var(--sl-color-neutral-700); 
	border-color: var(--sl-color-primary-500); 
	outline-color:  hsl(198.6 88.7% 48.4% / 40%);
	outline-width: 1px;
}
input:disabled { 
	background-color: var(--sl-input-background-color-disabled);
    border-color: var(--sl-input-border-color-disabled);
    opacity: 0.5;
    cursor: not-allowed;
}

button {
	/* box-shadow: var(--sl-shadow-x-small); */
	background-color: var(--sl-color-primary-600);
    border-color: var(--sl-color-primary-600);
    color: var(--sl-color-neutral-0);
	font-size: var(--sl-button-font-size-medium);
    height: var(--sl-input-height-medium);
    line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
    border-radius: var(--sl-input-border-radius-medium);
	display: inline-flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    border-style: solid;
    border-width: var(--sl-input-border-width);
    font-family: var(--sl-input-font-family);
    font-weight: var(--sl-font-weight-semibold);
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0px;
    transition: var(--sl-transition-x-fast) background-color, var(--sl-transition-x-fast) color, var(--sl-transition-x-fast) border, var(--sl-transition-x-fast) box-shadow;
    cursor: inherit;
}

button:focus-visible {
    outline: var(--sl-focus-ring);
    outline-offset: var(--sl-focus-ring-offset);
}
button:hover {
	background-color: var(--sl-color-primary-500);
    border-color: var(--sl-color-primary-500);
    color: var(--sl-color-neutral-0);
}
.button:focus {
    outline: none;
}