/*
// .tm-text-control
*/
.tm-text-control {
    max-width: 100%;
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    color: inherit;
    border: none;
    transition: box-shadow .2s;
    border-radius: var(--tm-control--border-radius);
    box-shadow: var(--tm-control--default--shadow);
    resize: vertical;
    vertical-align: middle;
}
.tm-text-control:hover {
    box-shadow: var(--tm-control--hover--shadow);
}
.tm-text-control:focus {
    outline: none;
    box-shadow: var(--tm-control--active--shadow);
}
.tm-text-control::placeholder {
    color: #757575;
}
.tm-text-control::-webkit-search-decoration,
.tm-text-control::-webkit-search-cancel-button,
.tm-text-control::-webkit-search-results-button,
.tm-text-control::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/*
// .tm-text-control--invalid
*/
.tm-text-control--invalid {
    box-shadow: var(--tm-invalid-control--default--shadow);
}
.tm-text-control--invalid:hover {
    box-shadow: var(--tm-invalid-control--hover--shadow);
}
.tm-text-control--invalid:focus {
    box-shadow: var(--tm-invalid-control--active--shadow);
}

/*
// .tm-select-control
*/
.tm-select-control {
    --padding-x: 10px;
    --padding-y: 8px;
    --padding-x-with-border: calc(var(--padding-x) + var(--tm-control--border-width));
    --padding-y-with-border: calc(var(--padding-y) + var(--tm-control--border-width));
    --padding-x-total: calc(var(--padding-x-with-border) * 2 + 5px + var(--tm-control--border-width));

    font-family: inherit;
    font-size: 14px;
    line-height: 1;
    appearance: none;
    cursor: pointer;
    color: inherit;
    border: none;
    border-radius: 2px;
    padding: var(--padding-y-with-border) var(--padding-x-total) var(--padding-y-with-border) var(--padding-x);
    box-shadow: var(--tm-control--default--shadow);
    transition: box-shadow .2s;

    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 10'%3E%3Cpath fill='%234d4d4d' d='M4.503 4H.497c-.403 0-.639-.508-.408-.878L2.095.233a.469.469 0 0 1 .816 0l2 2.889c.231.37-.005.878-.408.878zM.497 6h4.006c.403 0 .639.504.408.871L2.905 9.737a.47.47 0 0 1-.816 0l-2-2.866C-.142 6.504.094 6 .497 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 5px 10px;
    background-position: right calc(var(--padding-x-with-border) + var(--tm-control--border-width)) center;
}
.tm-select-control:hover {
    box-shadow: var(--tm-control--hover--shadow);
}
.tm-select-control:focus {
    outline: none;
    box-shadow: var(--tm-control--active--shadow);
}

/*
// .tm-field
*/
.tm-field--hidden {
    display: none;
}
.tm-field + .tm-field {
    margin-top: 16px;
}
.tm-field + .tm-field--checkbox {
    margin-top: 20px;
}
.tm-field__label {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    color: #737373;
}
.tm-field--checkbox .tm-field__label {
    display: flex;
    gap: 8px;
    margin: 0;
}
.tm-field--checkbox .tm-checkbox {
    position: relative;
    top: 2px;
}

/*
// .tm-radio-control
*/
.tm-radio-control {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
}
.tm-radio-control__input {
    width: inherit;
    height: inherit;
    position: absolute;
    opacity: 0;
}
.tm-radio-control__body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: inherit;
    height: inherit;
    appearance: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.tm-radio-control__input:checked + .tm-radio-control__body {
    background: var(--tm-theme--main-color);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.tm-radio-control__input:checked + .tm-radio-control__body:before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tm-theme--opposite-color);
}

/*
// .tm-check
*/
.tm-check {
    position: relative;
    font-size: 14px;
    line-height: 20px;
}
.tm-check + .tm-check {
    margin-top: 8px;
}
.tm-check__input {
    position: absolute;
    top: 2px;
}
.tm-check__label {
    padding-left: 24px;
    color: #737373;
}