/** default width for inputs are in tokens. Default width is 450px */
.form--compact {
    --input-default-width: 374px;
}

.input-container {
    margin-bottom: var(--spacing-2xl);
}

.input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.input-wrapper label {
    display: block;
}

.checkbox-label {
    font-size: 14px;
    display: block;
    margin-top: 8px;
    line-height: 16px;
    cursor: pointer;
    color: var(--input-color);
}

.checkbox-group {
    margin-top: var(--spacing-xs);
    box-sizing: unset;
}

.checkbox-group input[type="checkbox"] {
    display: none;
}

.checkbox-group .checkbox-label {
    position: relative;
    margin-left: 28px;
}

.checkbox-group .checkbox-label::before {
    content: "";
    display: inline-block;
    border: solid 2px var(--input-color);
    width: 14px;
    height: 14px;
    position: absolute;
    left: -28px;
    top: -2px;
    border-radius: 4px;
}

.checkbox-group input[type="checkbox"]:checked+.checkbox-label::before {
    border-color: var(--interaction-color);
    background-image: url("../Assets/CheckmarkSquare.svg");
    background-color: var(--interaction-color);
    background-repeat: no-repeat;
    background-position: center;
}

.input-wrapper .checkbox-label.position {
    position: relative;
}

.input-wrapper .checkbox-label.position input[type="radio"] {
    margin-right: 41.5px;
    border: 2px solid var(--input-color);
}

.input-wrapper .checkbox-label.position input[type="radio"]:after {
    content: "";
    width: 29.5px;
    height: 3px;
    background: var(--divider-color);
    display: block;
    position: absolute;
    left: 24px;
    top: 5px;
    border-radius: 5px;
    margin-left: 0;
}

.input-wrapper .checkbox-label.position input[type="radio"]:focus {
    box-shadow: none;
}

.input-wrapper .checkbox-label.position input[type="radio"]:checked:after {
    background: var(--active-menu-color);
}

.input-wrapper .checkbox-label.position input[type="radio"]:checked+span {
    color: var(--active-menu-color);
    font-weight: 700;
}

.input-wrapper .checkbox-label.position input[type="radio"]:checked {
    border: 2px solid var(--active-menu-color);
}

.input-wrapper .checkbox-label.position input[type="radio"]:checked:before {
    background-color: var(--active-menu-color);
    margin: .12rem;
}

.input-wrapper input[type='text'],
.input-wrapper input[type='password'],
.input-wrapper select,
.input-wrapper .input-form {
    width: var(--input-default-width);
    max-width: 100%;
    padding-inline: var(--input-padding);
    height: 40px;
    border: var(--input-border);
    outline: none;
    background: #fff;
    font-size: var(--input-font-size);
    margin: 0;
    border-radius: 6px;
    line-height: normal;
    color: var(--input-color);
}

.input-wrapper .input-form:focus-within,
.input-wrapper .input-form:focus {
    outline: none;
    border: var(--interaction-color) 1px solid;
    box-shadow: unset;
}

.input-wrapper select.input-form {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M8.00004 11.15C7.83004 11.15 7.67004 11.09 7.54004 10.96L3.04004 6.46C2.79004 6.21 2.79004 5.79 3.04004 5.54C3.29004 5.29 3.71004 5.29 3.96004 5.54L8.00004 9.58L12.04 5.54C12.29 5.29 12.71 5.29 12.96 5.54C13.21 5.79 13.21 6.21 12.96 6.46L8.46004 10.96C8.33004 11.09 8.17004 11.15 8.00004 11.15Z' fill='%23606060'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 24px 24px;
    padding-right: 42px;
    /* Make room for the dropdown arrow */
    cursor: pointer;

    &:hover {
        color: var(--input-color);
    }
}

.help-text {
    --body-font-size: 12px;
    display: none;
    color: var(--interaction-color);
    line-height: 16px;
    margin-top: 4px;
}

.help-text svg {
    vertical-align: middle;
}

.input-wrapper select.input-form:required:invalid {
    border: 2px solid var(--interaction-color);

    &+.help-text {
        display: block;
    }
}

/* Style for when select is focused */
.input-wrapper select.input-form:focus-within {
    border: var(--blue-violet) 1px solid;
}

/* Style for select options */
.input-wrapper select.input-form option {
    font-size: var(--body-font-size);
    padding: 8px;
}

.toggle-button {
    position: relative;
    display: inline-block;
    margin-left: 24px;
    vertical-align: middle;
}

.toggle-button .switch-wrap {
    margin-bottom: 0;
    cursor: pointer;
}

.switch-wrap input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch {
    display: grid;
    grid-template-columns: 0fr 1fr 1fr;
    transition: .2s;
    background: var(--toggle-surface-color);
    width: 48px;
    height: 24px;
    border-radius: calc(30px / 2);
}

.switch::after {
    content: '';
    border-radius: 50%;
    background-image: url("../Assets/cross.svg");
    background-repeat: no-repeat;
    background-position: center;
    grid-column: 2;
    transition: background .2s;
}

input:checked+.switch {
    grid-template-columns: 1fr 1fr 0fr;
    background: var(--blue-violet);
}

input:checked+.switch:after {
    background-image: url("../Assets/checkmark.svg");
}

/* Disabled state for inputs, selects, and textareas */
.input-wrapper input.input-form:disabled,
.input-wrapper select.input-form:disabled,
.input-wrapper textarea.input-form:disabled,
.input-wrapper input[type='text']:disabled,
.input-wrapper input[type='password']:disabled,
.input-wrapper select:disabled,
.input-wrapper textarea:disabled {
    border: 1px solid #DADADA;
    background-color: #F0F0F0;
    cursor: not-allowed;
    opacity: .4;
}

/* Ensure disabled controls keep disabled appearance on focus/hover */
.input-wrapper .input-form:disabled:hover,
.input-wrapper .input-form:disabled:focus,
.input-wrapper select:disabled:hover,
.input-wrapper select:disabled:focus,
.input-wrapper textarea:disabled:hover,
.input-wrapper textarea:disabled:focus {
    border: 1px solid #DADADA;
    box-shadow: none;
    outline: none;
}

/* Placeholder color on disabled */
.input-wrapper input.input-form:disabled::placeholder,
.input-wrapper select.input-form:disabled::placeholder,
.input-wrapper textarea.input-form:disabled::placeholder,
.input-wrapper input[type='text']:disabled::placeholder,
.input-wrapper input[type='password']:disabled::placeholder,
.input-wrapper select:disabled::placeholder,
.input-wrapper textarea:disabled::placeholder {
    color: #A8A8A8;
}