/*!

  Floating Labels Example

  Contributor(s):
  Michael "Spell" Spellacy

  sass --watch init.scss:../../media/2021-06-18-floating-labels/init.css --style compressed

*/@media(min-width: 64em){.inner-float .search-form-container{display:grid;gap:.625em;grid-template-columns:repeat(4, 1fr)}}.inner-float .search-form-container .search-form-item{border:1px #6f00ef solid;margin:1em 0;position:relative}.inner-float .search-form-container label{display:block;font-size:16px;inset-block-start:50%;inset-inline-start:20px;line-height:normal;margin:0;position:absolute;transform:translateY(-50%);transition:all .2s ease;z-index:1}.inner-float .search-form-container input,.inner-float .search-form-container select{border:0;font-size:1.25rem;height:100%;width:100%}.inner-float .search-form-container input:not([type=submit]),.inner-float .search-form-container select:not([type=submit]){background-color:rgba(0,0,0,0);display:block;margin:0;padding:30px 20px 10px;position:relative}.inner-float .search-form-container input:not([type=submit]):focus~label,.inner-float .search-form-container input:not([type=submit]):valid~label,.inner-float .search-form-container select:not([type=submit]):focus~label,.inner-float .search-form-container select:not([type=submit]):valid~label{font-size:13px;inset-block-start:14px}.inner-float .search-form-container input:not([type=submit]):focus,.inner-float .search-form-container select:not([type=submit]):focus{background-color:#fafad2}.inner-float .search-form-container input[type=submit],.inner-float .search-form-container select[type=submit]{background-color:#6f00ef;color:#fff;padding:1em}@media(min-width: 64em){.outer-float .search-form-container{display:grid;gap:.625em;grid-template-columns:repeat(4, 1fr)}}.outer-float .search-form-container .search-form-item{border:1px #6f00ef solid;margin:40px 0;position:relative}.outer-float .search-form-container label{display:block;font-size:16px;inset-block-start:50%;inset-inline-start:20px;line-height:normal;margin:0;position:absolute;transform:translateY(-50%);transition:all .2s ease;z-index:1}.outer-float .search-form-container input,.outer-float .search-form-container select{border:0;font-size:1.25rem;height:100%;width:100%}.outer-float .search-form-container input:not([type=submit]),.outer-float .search-form-container select:not([type=submit]){background-color:rgba(0,0,0,0);display:block;margin:0;padding:20px;position:relative}.outer-float .search-form-container input:not([type=submit]):focus~label,.outer-float .search-form-container input:not([type=submit]):valid~label,.outer-float .search-form-container select:not([type=submit]):focus~label,.outer-float .search-form-container select:not([type=submit]):valid~label{font-size:13px;inset-block-start:-18px}.outer-float .search-form-container input:not([type=submit]):focus,.outer-float .search-form-container select:not([type=submit]):focus{background-color:#fafad2}.outer-float .search-form-container input[type=submit],.outer-float .search-form-container select[type=submit]{background-color:#6f00ef;color:#fff;padding:1em}@media(min-width: 64em){.outer-float-js .search-form-container{display:grid;gap:.625em;grid-template-columns:repeat(4, 1fr)}}.outer-float-js .search-form-container .search-form-item{border:1px #6f00ef solid;margin:40px 0;position:relative}.outer-float-js .search-form-container .search-form-item:has([disabled]){border-color:gray}.outer-float-js .search-form-container .search-form-item:has([disabled]~label){color:gray}.outer-float-js .search-form-container label{display:block;font-size:16px;inset-block-start:50%;inset-inline-start:20px;line-height:normal;margin:0;position:absolute;transform:translateY(-50%);transition:all .2s ease;z-index:1}.outer-float-js .search-form-container input,.outer-float-js .search-form-container select{border:0;font-size:1.25rem;height:100%;width:100%}.outer-float-js .search-form-container input:not([type=submit]),.outer-float-js .search-form-container input select,.outer-float-js .search-form-container select:not([type=submit]),.outer-float-js .search-form-container select select{background-color:rgba(0,0,0,0);display:block;margin:0;padding:20px;position:relative}.outer-float-js .search-form-container input:not([type=submit]).has-text,.outer-float-js .search-form-container input:not([type=submit]).has-focus,.outer-float-js .search-form-container input select.has-text,.outer-float-js .search-form-container input select.has-focus,.outer-float-js .search-form-container select:not([type=submit]).has-text,.outer-float-js .search-form-container select:not([type=submit]).has-focus,.outer-float-js .search-form-container select select.has-text,.outer-float-js .search-form-container select select.has-focus{color:inherit}.outer-float-js .search-form-container input:not([type=submit]).has-text~label,.outer-float-js .search-form-container input:not([type=submit]).has-focus~label,.outer-float-js .search-form-container input select.has-text~label,.outer-float-js .search-form-container input select.has-focus~label,.outer-float-js .search-form-container select:not([type=submit]).has-text~label,.outer-float-js .search-form-container select:not([type=submit]).has-focus~label,.outer-float-js .search-form-container select select.has-text~label,.outer-float-js .search-form-container select select.has-focus~label{font-size:13px;inset-block-start:-18px}.outer-float-js .search-form-container input:not([type=submit]).has-focus,.outer-float-js .search-form-container input select.has-focus,.outer-float-js .search-form-container select:not([type=submit]).has-focus,.outer-float-js .search-form-container select select.has-focus{background-color:#fafad2}.outer-float-js .search-form-container input[type=submit],.outer-float-js .search-form-container select[type=submit]{background-color:#6f00ef;color:#fff;padding:1em}.outer-float-js .search-form-container select{color:rgba(0,0,0,0)}.outer-float-js .search-form-container select[disabled],.outer-float-js .search-form-container select[disabled]~label{cursor:not-allowed}/*# sourceMappingURL=init.css.map */