// ==========================================================================
// Components / Form
// ==========================================================================

.c-form {

}

.c-form_item {
    position: relative;
    margin-bottom: rem(30px);
}

// Label
// ==========================================================================

.c-form_label {
    display: block;
    margin-bottom: rem(10px);
}

// Input
// ==========================================================================

$input-icon-color: 424242; // No #

.c-form_input {
    padding: rem(10px);
    border: 1px solid lightgray;
    background-color: colorCode(lightest);

    &:hover {
        border-color: darkgray;
    }

    &:focus {
        border-color: dimgray;
    }

    &::placeholder {
        color: gray;
    }
}

// Checkbox
// ==========================================================================

$checkbox: rem(18px);
$checkbox-icon-color: $input-icon-color;

.c-form_checkboxLabel {
    @extend .c-form_label;

    position: relative;
    display: inline-block;
    margin-right: rem(10px);
    margin-bottom: 0;
    padding-left: ($checkbox + rem(10px));
    cursor: pointer;

    &::before, &::after {
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        margin-top: math.div(-$checkbox, 2);
        padding: 0;
        width: $checkbox;
        height: $checkbox;
        content: "";
    }

    &::before {
        background-color: colorCode(lightest);
        border: 1px solid lightgray;
    }

    &::after {
        border-color: transparent;
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2210.5%22%20viewBox%3D%220%200%2013%2010.5%22%20enable-background%3D%22new%200%200%2013%2010.5%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23#{$checkbox-icon-color}%22%20d%3D%22M4.8%205.8L2.4%203.3%200%205.7l4.8%204.8L13%202.4c0%200-2.4-2.4-2.4-2.4L4.8%205.8z%22%2F%3E%3C%2Fsvg%3E");
        background-position: center;
        background-size: rem(12px);
        background-repeat: no-repeat;
        opacity: 0;
    }

    &:hover {
        &::before {
            border-color: darkgray;
        }
    }

    .c-form_checkbox:focus + & {
        &::before {
            border-color: dimgray;
        }
    }

    .c-form_checkbox:checked + & {
        &::after {
            opacity: 1;
        }
    }
}

.c-form_checkbox {
    position: absolute;
    width: 0;
    opacity: 0;
}

// Radio
// ==========================================================================

$radio-icon-color: $input-icon-color;

.c-form_radioLabel {
    @extend .c-form_checkboxLabel;

    &::before, &::after {
        border-radius: 50%;
    }

    &::after {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20enable-background%3D%22new%200%200%2013%2013%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20fill%3D%22%23#{$radio-icon-color}%22%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%226.5%22%2F%3E%3C%2Fsvg%3E");
        background-size: rem(6px);
    }
}

.c-form_radio {
    @extend .c-form_checkbox;
}

// Select
// =============================================================================

$select-icon: rem(40px);
$select-icon-color: $input-icon-color;

.c-form_select {
    position: relative;
    cursor: pointer;

    &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        width: $select-icon;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2213%22%20height%3D%2211.3%22%20viewBox%3D%220%200%2013%2011.3%22%20enable-background%3D%22new%200%200%2013%2011.3%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23#{$select-icon-color}%22%20points%3D%226.5%2011.3%203.3%205.6%200%200%206.5%200%2013%200%209.8%205.6%20%22%2F%3E%3C%2Fsvg%3E");
        background-position: center;
        background-size: rem(8px);
        background-repeat: no-repeat;
        content: "";
        pointer-events: none;
    }
}

.c-form_select_input {
    @extend .c-form_input;

    position: relative;
    z-index: 1;
    padding-right: $select-icon;
    cursor: pointer;
}

// Textarea
// =============================================================================

.c-form_textarea {
    @extend .c-form_input;

    min-height: rem(200px);
}