@import './globals.scss';

.Range
{
    span,
    input
    {
        box-sizing: border-box;
        display: inline-block;
    }

    .line,
    .start,
    .end{
        display: inline-block;
    }

    .line{
        position: relative;
        width: 100%;
        border-radius: $border-radius;
        background-color: $border-color;
    }

    .start,
    .end{
        position: absolute;
        border-radius: 50%;
        background-color: $border-color;
    }

    .start{
        left: 0px;
    }

    .end-xs,
    .end-s,
    .end-l,
    .end-xl
    {
        right: 0px;
    }

    .min-max{
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
    }

    .min,
    .max{
        padding: 2px 6px;
        border-radius: $border-radius;
        background-color: $border-color;
    }

    .min-input,
    .max-input{
        border: 1px solid $border-color;
        border-radius: 3px;
        padding: 5px 10px;
        background-color: transparent;
    }

    input{
        padding: 0;
        margin: 0;
        min-width: 20px;
        margin: auto;
        line-height: unset;
        text-align: center;
        border: none;
    }

    input:focus{
        outline: none;
    }

    .input-readonly
    {
        
    }
}