chemiker/sciolism-2019-for-wordpress

.comment-respond {
    label {
        display: inline-block;
        min-width: 100px;
    }
}

input,
button {
    font-family: $code;
    border: {
        @include setMultiProperty(width radius, 0);
        bottom: #{$headerSpacer * 0.08} solid $textColor;
    }

    padding: $iconSpacer;
}

input {
    &.searchField {
        width: calc(100% - #{$iconSpacer * 8});
        padding: $borderRadius;
        -webkit-appearance: none;
        border: {
            width: 0;
            radius: 0;
            bottom: #{$headerSpacer * 0.08} solid $darkGrey;
        }
        font: {
            family: $heading;
            size: 1.5em;
            weight: bold;
        }
        background-color: $grey;

        &:focus {
            border: {
                width: 0;
                bottom: #{$headerSpacer * 0.08} solid $darkerGrey;
            }    
        }

        &,
        &::placeholder {
            color: $darkerGrey;
        }

        &::-ms-clear,
        &::-webkit-search-cancel-button { 
            -webkit-appearance: none; 
        }
    }
}

textarea,
input[type=submit],
button[type=submit]
input[type=submit].searchSubmit:focus {
    border: #{$headerSpacer * 0.08} solid $textColor;
}

textarea:focus,
input:focus,
button:focus {
    margin: -#{$headerSpacer * 0.04};
    border-width: #{$headerSpacer * 0.12};
}

input[type=submit],
button[type=submit] {
    padding: $iconSpacer 3 * $iconSpacer;

    &.searchSubmit {
        @include setMultiProperty(padding border, 0px);

        &:focus {
            position: relative;
            display: inline;
            width: 100%;
            height: 30px;
        }
    }
}

input[type=submit]:hover,
button[type=submit]:hover {
    cursor: pointer;
    background-color: $darkGrey;
}