@import 'constants';

@mixin form-component-base {
    width: 100%;
    font-size: 1em;
    appearance: none;
    height: 2.4em;
    padding: $form-padding-default;
    border-radius: $border-radius;
    box-shadow: none;
    box-sizing: border-box;
    font-family: inherit;
}

@mixin select-icon-base {
    display: block;
    position: relative;
    vertical-align: top;
    &::after {
        content: " ";
        display: block;
        height: 0.5em;
        pointer-events: none;
        position: absolute;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        width: 0.5em;
        margin-top: -0.375em;
        right: 1.125em;
        top: 50%;
        z-index: 4;
        border: 1px solid $color-dark;
        border-right: 0;
        border-top: 0;
    }
}

@mixin form-colors {
    @each $colorName, $color in $color-list {
        &.#{$colorName}{
            border: solid 1px #{$color};

            &[disabled] {
                background-color: lighten-2($color);
                border-color: lighten-2($color);
            }
        }
    }
}

@mixin clickable-colors {
    @each $colorName, $color in $color-list {
        .checkbox.#{$colorName} {
            input[type="checkbox"] {
                &:checked {
                    + label {
                        &:before {
                            background: #{$color};
                            border-color: #{$color};
                        }
                    }   
                }
                
                &[disabled] {
                    &:checked + label:before {
                        background: lighten-2($color);
                        border-color: lighten-2($color);
                    }
                }
            }
        }

        .radio.#{$colorName} {
            input[type="radio"] {
                + label {
                    &:after {
                        background: #{$color};
                    }
                }

                &:checked {
                    + label {
                        &:before {
                            border-color: #{$color};
                        }
                    }
                }


                &[disabled] {
                    &:checked + label {
                        &:before {
                            border-color: lighten-2($color);
                        }
                        &:after {
                            background: lighten-2($color);
                        }
                    }
                }
            }
        }

        .switch.#{$colorName} {
            input[type="checkbox"] {
                &:checked {
                    + label {
                        &:before {
                            background: #{$color};
                        }
                    }   
                }
                
                &[disabled] {
                    &:checked + label:before {
                        background: lighten-2($color);
                        border-color: lighten-2($color);
                    }
                }
            }
        }
    }
}