@use "../common/utils" as *;
@use "../common/mixins" as *;

.input,
.select,
.textarea {
    border: 1px solid rgba(var(--color-border), .6);
    height: calc-rem(50px);
    width: 100%;
    font-size: clamp-font(12px, 14px);
    margin-bottom: calc-rem(5px);
    border-radius: calc-rem(5px);
    padding: calc-rem(0 15px);
    background: rgba(var(--color-background));

    &::placeholder {
        color: rgba(0, 0, 0, .3);
    }

    &:focus{
        outline: 1px solid rgba(var(--color-primary));
    }

    [disabled],
    [readonly] {
        background: rgba(var(--color-border));
        cursor: not-allowed;
    }
}

.textarea {
    height: calc-rem(160px);
    padding: calc-rem(15px);
    font-weight: var(--font-weight-medium);
}

.checkbox-group,
.radio-group {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-block: 15px;

    a {
        font-weight: 500;
        color: #000;
        text-decoration: underline;

        &:hover {
            color: rgba(0, 0, 0, .5);
        }
    }
}

.checkbox-group {
    input[type="checkbox"] {
        margin-right: calc-rem(10px);
        appearance: none;
        width: calc-rem(20px);
        height: calc-rem(20px);
        border: 1px solid rgba(var(--color-border), .6);
        border-radius: 5px;
        outline: none;
        box-shadow: 0 0 calc-rem(5px) #FFF;
        transition: box-shadow 0.3s ease;
        background: #FFF;

        &:checked {
            background: #FFF url('../images/icons/icon-check-small.svg') no-repeat center center;
            border: 1px solid rgba(var(--color-secondary), 1);
        }
    }

    span {
        font-size: calc-rem(12px);
    }

    a{
        transition: .3s ease;

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

.radio-group {
    display: flex;
    align-items: flex-start;
    font-weight: 500;
    margin-bottom: 10px;

    small {
        opacity: .5;
    }

    input[type="radio"] {
        margin-top: 2px;
        margin-right: 10px;
        appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid rgba(var(--color-border));
        border-radius: 50%;
        outline: none;
        box-shadow: 0 0 5px #FFF;
        transition: box-shadow 0.3s ease;

        &:before {
            content: '';
            display: block;
            width: 40%;
            height: 40%;
            margin: 30% auto;
            border-radius: 50%;
        }

        &:checked {
            background: #000;
            border: 1px solid #000;

            &:before {
                background: #FFF;
            }
        }
    }

    &--spaced {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
}
