/**
  * Base tag
  */

form {
    margin-bottom: 1.5rem;
}

/**
  * Global label styles,
  * Checkbox, Radiobutton - block/inline - , file upload.
  * * * Checkbox & Radio's are wrapped in labels
  * * * -moz-url-prefixes added to prevent weird alignment of radio and checkboxes
  */

label {
    display: block;
    margin-bottom: 0.5rem;
}

/**
  * form elements for extra bottom margin to structure forms.
  */

.form-part {
    border: 0;
    padding: 0;
    margin: 0 0 1.5rem;
}

.checkbox, .radio {
    padding-left: 25px; /* fixed padding because radio's and checkboxes don't scale well */
    margin-top: 0;
    margin-bottom: 1rem;
    position: relative;
    display: table;
    cursor: pointer;
    input {
        position: absolute;
        width: auto;
        margin: 0;
        left: 0;
        cursor: pointer;
        &[type="checkbox"] {
            top: calc(1em / 3);
            @-moz-document url-prefix() {
                top: calc(1em / 2.6);
            }
        }
        &[type="radio"] {
            top: calc(1em / 4);
            @-moz-document url-prefix() {
                top: calc(1em / 2.7);
            }
        }
    }
}

/* inline checkbox & radio */
.checkbox-inline, .radio-inline {
    display: inline-block;
    margin-right: 1.2rem;
    margin-bottom: 0;
}

/**
  * General input styling
  */

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    display: block;
    width: 100%;
    border: $default-border-width solid $soft-gray;
    border-radius: $default-border-radius;
    line-height: $base-line-height;
    padding: 0.5rem 0.8rem;
    appearance: none;
    background-color: white;
    &::placeholder {
        color: $hard-gray;
        opacity: 1;
    } 
    &:focus {
        border-color: $primary-color;
        outline: none;
    }
}

/**
  * Specific Password styling
  */
input[type="password"] {
    font-family: verdana;
    &::placeholder {
        font-family: $base-font-family;
    }
}

/**
  * Specific file input styling
  */

input[type="file"] {
    line-height: 1;
    font-size: 16px; /* enforce for consistent behavior */
    border: 0;
    padding-left: 0;
    padding-right: 0;
}

/**
  * Specific textarea styling
  */

textarea {
    width: 100% !important;
    min-height: 10rem;
}

/**
  * Specific select styling
  * Browser do not style selects in the same way as regular single line inputs
  * so additional css is required.
  */

select {
    cursor: pointer;
    &:not([multiple]) {
        background-image: url('data:image/png;base64,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');
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: right center;
        background-origin: content-box;
        height: 3.5rem;
        @media (min-width: $size-switch) {
            height: 2.87rem;
        }
    }
    &::-ms-expand {
        display: none;
    }
    @-moz-document url-prefix() {
        padding: 0.6rem 0.8rem;
    }
}

/**
  * Progress, meter and range styling
  */
progress, meter, input[type="range"] {
    width: 100%;
}

/**
  * Horizontal rule
  */

hr {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 0;
    border-top: $default-border-width solid $soft-gray;
}

/**
  * Disabled styles for forms
  */

.disabled,
[disabled] {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
    [disabled] {
        opacity: 1;
    }
}