input[type=color] {
    cursor: pointer;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea {
    align-items: center;
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1);
    border: var(--strokeWidthThin) solid var(--colorNeutralStroke1);
    border-bottom-color: var(--colorNeutralStrokeAccessible);
    border-radius: var(--borderRadiusMedium);
    box-sizing: border-box;
    height: 32px;
    display: inline-flex;
    flex-direction: row;
    gap: var(--spacingHorizontalXXS);
    padding: 0 var(--spacingHorizontalMNudge);
    position: relative;
    font-family: var(--fontFamilyBase);
    font-size: var(--fontSizeBase300);
    font-weight: var(--fontWeightRegular);
    line-height: var(--lineHeightBase300);

    &:focus-within {
        outline: 0;
        border-bottom: 0;
        border-bottom: 2px solid var(--colorCompoundBrandStroke);
    }

    &:disabled,
    &:disabled:hover {
        background: var(--colorTransparentBackground);
        border: var(--strokeWidthThin) solid var(--colorNeutralStrokeDisabled);
        cursor: default;
    }

    &:read-only {
        color: var(--colorNeutralForeground1);
    }

    /* for blazor .invalid and css :invalid*/
    &.invalid,
    &:invalid {
        border: 1px solid var(--colorPaletteRedBorder2);
        outline: none;
    }
}

@media (max-width: 576px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    textarea,
    select {
        padding: 0 var(--spacingHorizontalXS);
    }
}