// Form Elements
//
// General input elements.
//
// Markup:
// <input type="text" name="input-text" value="Form Element: text input" class="px2-input" />
// <button class="px2-btn">OK</button>
// <hr />
// <input type="password" name="password" value="password" class="px2-input" />
// <input type="number" name="input-number" value="200" class="px2-input" />
// <input type="search" name="input-search" value="Search Keyword" class="px2-input" />
// <input type="tel" name="input-tel" value="090-0000-0000" class="px2-input" />
// <input type="url" name="input-url" value="https://pickles2.pxt.jp/" class="px2-input" />
// <input type="email" name="input-email" value="pickles2@example.com" class="px2-input" />
// <input type="datetime" name="input-datetime" value="" class="px2-input" />
// <input type="date" name="input-date" value="" class="px2-input" />
// <input type="month" name="input-month" value="" class="px2-input" />
// <input type="week" name="input-week" value="" class="px2-input" />
// <input type="time" name="input-time" value="" class="px2-input" />
// <input type="color" name="input-color" value="" class="px2-input" />
// <input type="file" name="input-file" value="" class="px2-input" />
// <input type="datetime-local" name="input-datetime-local" value="" class="px2-input" />
// <select name="input-select" class="px2-input"><option value="1">Select Option 1</option></select>
// <hr />
// <textarea name="input-textarea" class="px2-input">Text Area</textarea>
// <hr />
// Readonly:
// <input type="text" name="input-text" value="Form Element: text input" class="px2-input" readonly />
// <hr />
// Disabled:
// <input type="text" name="input-text" value="Form Element: text input" class="px2-input" disabled />
// <hr />
// Block:
// <p><input type="text" name="input-text" value="Form Element: text input" class="px2-input px2-input--block" /></p>
// <p><textarea name="input-text" class="px2-input px2-input--block">Form Element: text input</textarea></p>
// <p><select name="input-select" class="px2-input px2-input--block"><option value="1">Select Option 1</option></select></p>
// <hr />
// Errored:
// <p><input type="text" name="input-text" value="Form Element: text input" class="px2-input px2-input--error" /></p>
// <p><textarea name="input-text" class="px2-input px2-input--error">Form Element: text input</textarea></p>
// <p><select name="input-select" class="px2-input px2-input--error"><option value="1">Select Option 1</option></select></p>
//
// Styleguide 6.0
input[type=text].px2-input,
input[type=password].px2-input,
input[type=number].px2-input,
input[type=search].px2-input,
input[type=tel].px2-input,
input[type=url].px2-input,
input[type=email].px2-input,
input[type=datetime].px2-input,
input[type=date].px2-input,
input[type=month].px2-input,
input[type=week].px2-input,
input[type=time].px2-input,
input[type=color].px2-input,
input[type=file].px2-input,
input[type=datetime-local].px2-input,
textarea.px2-input,
select.px2-input{
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    min-width: 50px;
    max-width: 100%;
    padding: .375rem .75rem;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.5;
    color: $px2-text-color; // fallback
    color: var(--px2-text-color, $px2-text-color);
    background-color: $px2-background-color; // fallback
    background-color: var(--px2-background-color, $px2-background-color);
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    &:focus{
        color: #333;
        background-color: #fff;
        border-color: #80bdff;
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    }
    &[readonly]{
        background-color: #eee;
        &:focus{
            border-color: #ced4da;
            box-shadow: none;
        }
    }
    &[disabled]{
        color: #8e959c;
        background-color: #eee;
    }
    &--block{
        display: block;
        width: 100%;
    }

    &--error {
        border-color: #721c24;
        color: #721c24;
        background-color: #f8d7da;
    }
}

// Input Group
//
// Markup:
// <div class="px2-p">
// <div class="px2-input-group">
// <input type="text" name="input-text" value="Form Element: text input" class="px2-input" />
// <button class="px2-btn">OK</button>
// </div>
// </div>
// <div class="px2-p">
// <div class="px2-input-group">
// <input type="number" name="input-number" value="Form Element: number input" class="px2-input" />
// <span class="px2-input-group__text">px</span>
// <button class="px2-btn">OK</button>
// </div>
// </div>
// <div class="px2-p">
// <p>Fluid</p>
// <div class="px2-input-group px2-input-group--fluid">
// <input type="number" name="input-number" value="Form Element: number input" class="px2-input" />
// <span class="px2-input-group__text">px</span>
// <button class="px2-btn">OK</button>
// </div>
// </div>
//
// Styleguide 6.1
.px2-input-group{
    display: inline-flex;
    box-sizing: border-box;
    border-radius: 0px;
    max-width: 100%;

    &__text {
        display: inline-block;
        box-sizing: border-box;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: normal;
        line-height: 1.5;
        color: $px2-text-color; // fallback
        color: var(--px2-text-color, $px2-text-color);
        background-color: $px2-background-color; // fallback
        background-color: var(--px2-background-color, $px2-background-color);
        border: 1px solid #ced4da;
    }

    >*,
    >input.px2-input,
    >select.px2-input,
    >textarea.px2-input,
    >.px2-btn{
        border-right-width: 0px;
        flex-grow: 1;
    }

    >:first-child,
    >input:first-child.px2-input,
    >select:first-child.px2-input,
    >textarea:first-child.px2-input,
    >:first-child.px2-btn{
        border-radius: .25rem 0 0 .25rem / .25rem 0 0 .25rem;
    }
    >:last-child,
    >input:last-child.px2-input,
    >select:last-child.px2-input,
    >textarea:last-child.px2-input,
    >:last-child.px2-btn{
        border-right-width: 1px;
        border-radius: 0 .25rem .25rem 0 / 0 .25rem .25rem 0;
    }

    &--fluid {
        display: flex;
        width: 100%;
    }

}


// Form input list
//
// Markup:
// <div class="px2-form-input-list">
//  <ul class="px2-form-input-list__ul">
// 	    <li class="px2-form-input-list__li">
// 	        <div class="px2-form-input-list__label"><label for="input-text-001">Input Label</label></div>
// 	        <div class="px2-form-input-list__input"><input type="text" id="input-text-001" name="input-text-001" value="Form Element: text input" class="px2-input" /></div>
// 	    </li>
// 	    <li class="px2-form-input-list__li px2-form-input-list__li--required">
// 	        <div class="px2-form-input-list__label"><label for="input-text-002">Input Label</label></div>
// 	        <div class="px2-form-input-list__input"><input type="text" id="input-text-002" name="input-text-002" value="Form Element: text input" class="px2-input" /></div>
// 	    </li>
// 	    <li class="px2-form-input-list__li px2-form-input-list__li--error">
// 	        <div class="px2-form-input-list__label"><label for="input-text-003">Input Label</label></div>
// 	        <div class="px2-form-input-list__input"><input type="text" id="input-text-003" name="input-text-003" value="Form Element: text input" class="px2-input px2-input--error" /></div>
// 	    </li>
//  </ul>
// </div>
//
// Styleguide 6.2

.px2-form-input-list{
	margin-top: 1em;
	margin-bottom: 1em;

	ul.px2-form-input-list__ul{
		display: table;
		border-collapse: collapse;
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #999999;
		margin: 0;
		padding: 0;

		li.px2-form-input-list__li{
			display: table-row;
			list-style-type: none;
			margin: 0;
			padding: 0;

			.px2-form-input-list__label{
				display: table-cell;
                vertical-align: top;
				background-color: #e7e7e7;
				font-weight: bold;
				padding: 0.4em 1em;
				width: 30%;
				border: 1px solid #999999;
			}
			.px2-form-input-list__input{
				display: table-cell;
                vertical-align: top;
                background-color: $px2-background-color; // fallback
                background-color: var(--px2-background-color, $px2-background-color);
				padding: 0.4em 1em;
				width: 70%;
				border: 1px solid #999999;
			}
			p, .px2-p {
				margin-top: 0.2em;
				margin-bottom: 0.2em;
			}

            &--required {
                .px2-form-input-list__label{
                    &::after {
                        content: "*";
                        color: #e11;
                        font-weight: bold;
                        margin: 0 0 0 0.7em;
                    }
                }
                .px2-form-input-list__input{
                }
            }
            &--error {
                .px2-form-input-list__label{
                    color: #721c24;
                    &::before {
                        content: "!!!";
                        color: #e11;
                        margin: 0 0.7em 0 0;
                    }
                }
                .px2-form-input-list__input{
                }
            }
		}
	}

	@media all and (max-width: 544px){
		ul.px2-form-input-list__ul{
			display: block;
			border-bottom: 0 none;

			li.px2-form-input-list__li{
				display: block;

				.px2-form-input-list__label{
					display: block;
					border-left: 0 none;
					border-top: 0 none;
					border-right: 0 none;
					padding: 0.4em 1em;
					width: auto;
				}
				.px2-form-input-list__input{
					display: block;
					border-left: 0 none;
					border-top: 0 none;
					border-right: 0 none;
					padding: 0.4em 1em;
					width: auto;
				}
			}
		}
	}
}


// Form submit buttons
//
// Markup:
// <div class="px2-form-submit-area">
// <ul class="px2-form-submit-area__btns">
// <li><button class="px2-btn px2-btn--primary">OK 1</button></li>
// <li><button class="px2-btn px2-btn--primary">OK 2</button></li>
// </ul>
// <ul class="px2-form-submit-area__backward-btns">
// <li><button class="px2-btn px2-btn--secondary">Back 1</button></li>
// <li><button class="px2-btn px2-btn--secondary">Back 2</button></li>
// </ul>
// </div>
//
// Styleguide 6.3

.px2-form-submit-area {
    margin: 1em 0;
    padding: 0;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;

    &__btns,
    &__backward-btns {
        display: flex;
        flex-direction: row-reverse;
        margin: 0;
        padding: 0;
        > li {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
    }

	@media all and (max-width: 544px){
        flex-direction: column;

        &__btns,
        &__backward-btns {
            flex-direction: column;
            > li {
                margin: 0.2em auto;
            }
        }

        &__backward-btns {
            margin-top: 1em;
            > li {
                margin: 0.2em auto 0.2em 0;
            }
        }
    }
}