/*
 * Fieldset
 *
 * Override the default input and button elements.
 */

@mixin fieldset($type: inline-flex) {
    display: $type;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: top;
    border: 1px solid $fieldset-hint-color;
    border-radius: .4em;
    font-size: $fieldset-font-size;
}

@mixin fieldset-additionals($padding: .25em .5em, $icon-valign: text-top) {
    flex: .000001 0 auto;
    box-sizing: border-box;
    min-width: 1.5em;
    padding: $padding;
    font-size: 1em;
    text-align: center;
    color: $fieldset-hint-color;

    svg {
        width: 1em;
        height: 1em;
        margin-top: .06em;
        vertical-align: $icon-valign; // middle or text-top

        path {
            fill: $fieldset-hint-color;
        }
    }
}

.fieldset {
    display: inline-block;

    &__border {
        @include fieldset(inline-flex);

        &__changed {
            border-color: rgba(227, 122, 31, 1);
        }
    }

    &__label {
        display: inline;
        font-size: $fieldset-font-size;
        line-height: 2.1em;
        vertical-align: top;

        &--inline-left, &--left {
            @extend .fieldset__label;
            text-align: left;
            padding-right: 1em;
        }

        &--inline-right, &--right {
            @extend .fieldset__label;
            text-align: right;
            padding-left: 1em;
        }

        &--block, &--block-left {
            display: block;
            padding: .35em 0;
            text-align: left;
            font-size: 1rem;
        }

        &--block-right {
            @extend .fieldset--block;
            text-align: right;
        }

        &--block-center {
            @extend .fieldset--block;
            text-align: center;
        }
    }

    &__input, &__input--left {
        flex: 1 0 auto;
        padding: .39em .25em .4235em;
        text-align: left;

        input[type="text"],
        input[type="password"],
        input[type="search"] {
            display: block;
            width: 100%;
            font-family: $font-family--default;
            box-sizing: border-box;
            font-size: 1em;
            font-weight: 100;
            text-align: left;
            padding: 0;
            border: none;
            background-color: transparent;

            &::-webkit-input-placeholder,
            &::-moz-placeholder,          // firefox 19+
            &:-ms-input-placeholder,      // ie
            &:-moz-placeholder {
                font-weight: 100;
                color: $fieldset-hint-color;
            }
        }

        &--right {
            @extend .fieldset__input;
            text-align: right;

            input[type="text"],
            input[type="password"],
            input[type="search"] {
                text-align: right;
            }
        }

        &--center {
            @extend .fieldset__input;
            text-align: center;

            input[type="text"],
            input[type="password"],
            input[type="search"] {
                text-align: center;
            }
        }
    }

    &__hint, &__hint--left {
        font-size: .7em;
        color: $fieldset-hint-color;
        padding: .25rem 0;

        &--right {
            @extend .fieldset__hint;
            text-align: right;
        }

        &--center {
            @extend .fieldset__hint;
            text-align: center;
        }
    }

    &__before {
        @include fieldset-additionals();
    }

    &__after {
        @include fieldset-additionals();
    }

    &--block {
        @extend .fieldset;
        display: block;

        > * {
            display: flex;
        }
    }
}