.@{classname} {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    color: #000000d9;
    font-size: 14px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all .3s;
    touch-action: manipulation;


    input,
    textarea {
        border: none;
        outline: none;
        flex: 1;
        width: 1px;
        padding: 6px 4px 4px 4px;
        line-height: 1.55;
        transition: background .3s, color .3s;

        &::selection {
            color: #FFFFFF;
            background-color: var(--sp-primary-color-hover);
            text-shadow: none;
        }
    }

    &:hover {
        border-color: var(--sp-primary-color-hover);
    }

    &:focus-visible {
        outline: none;
    }

    span.showCount {
        margin: 0 3px;
        color: #00000073;

    }

    &.--shows {
        &:hover {
            border-color: #d9d9d9;
        }

        input,
        textarea {
            border: 1px solid transparent;
            transition: all .3s;
            z-index: 9;
            border-radius: 2px;

            &:focus,
            &:hover {
                border-color: var(--sp-primary-color-hover);
                box-shadow: 0 0 0 2px var(--sp-primary-color-outline);
                border-right-width: 1px !important;
                outline: 0;
            }
        }

    }

    &.--bordered {
        border: none;

        &:focus,
        &.focus,
        input,
        input:hover,
        input:focus,
        textarea,
        textarea:focus,
        .sp-number-before,
        .sp-number-after,
        .@{classname}-before,
        .@{classname}-after {
            border: none;
            box-shadow: none;
        }
    }

    &.--disabled {
        border-color: #d9d9d9;
        box-shadow: none;
        color: #00000040;
        background-color: #f5f5f5;
        border-color: #d9d9d9;
        position: relative;

        &::after {
            content: "";
            cursor: not-allowed;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        input,
        .sp-number-before,
        .sp-number-after,
        .@{classname}-before,
        .@{classname}-after,
        textarea {
            color: #00000040;
            background-color: #f5f5f5;
        }
    }

    .allow-clear {
        margin: 0 5px;
        color: #a8a1a1;
        opacity: 0;
        transition: all .3s;
        cursor: pointer;
    }

    &.focus {
        border-color: var(--sp-primary-color-hover);
        box-shadow: 0 0 0 2px var(--sp-primary-color-outline);
        border-right-width: 1px !important;
        outline: 0;
    }

    .sp-number-before,
    .sp-number-after,
    .@{classname}-before,
    .@{classname}-after {
        position: relative;
        padding: 5.5px 11px;
        color: #000000d9;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        background-color: #fafafa;
        border: 1px solid #d9d9d9;
        // border-radius: 1px;
        transition: all .3s;
        border-top: 0;
        border-bottom: 0;
    }

    .sp-number-before,
    .@{classname}-before {
        margin-left: -1px;
        font-size: 100%;
    }

    .sp-number-after,
    .@{classname}-after {
        margin-right: -1px;
        font-size: 100%;
    }

    .icon-prefix {
        // margin-right: 5px;
        padding: 4px 0 4px 11px;

    }

    .icon-suffix {
        // margin-left: 5px;
        padding: 4px 11px 4px 0;
    }

    &.@{classname}:placeholder-shown {
        text-overflow: ellipsis;
    }

    &[size='small'] {
        font-size: 14px;

        input,
        textarea {
            padding: 0px 2px;
        }

        .sp-number-before,
        .sp-number-after,
        .@{classname}-before,
        .@{classname}-after {
            padding: 1px 4px;
        }

        .icon-suffix {
            padding: 0 4px 0 0;
        }

        .icon-prefix {
            padding: 0 0 0 4px;
        }
    }

    &[size='large'] {
        font-size: 16px;

        input,
        textarea {
            padding: 9.5px 7.5px 7.5px 7.5px;
        }

        .sp-number-before,
        .sp-number-after,
        .@{classname}-before,
        .@{classname}-after {
            padding: 8.5px 11px;
        }


    }
}