/* KBY Reset */
*, *::before, *::after {
    box-sizing: border-box;
}
* {
    margin: 0;
}
body {
     line-height: 1.42;
     -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
    display: block;
    width: 100%;
}
ul {
    padding:0;
    list-style: none;
}
input, button, textarea, select {
    font: inherit;
    padding: 0;
    border: none;
    outline: none;
    background: none;
}
a {
    /* text-decoration:none; */
    color:inherit;
}
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}
[popover] {
  margin: 0;
  padding: 0;
  border: 0;
}

.kby-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #000000;
  border: 1px solid #ccc;
  padding: 0.5em 1em;
  font-size: 1rem;
  cursor: pointer;
  border-radius: 0.8rem;
}

select option {
    border-radius: 0.8rem;
}

:root {
    --kby-hdr-hgt:5.4rem;
    --kby-icn-hgt:2.4rem;
    --kby-btn-hgt:3.2rem;
    --kby-btn-rds:9999px;
    --kby-fld-hgt: 4.4rem;
    --kby-tgl-hgt:2.4rem;
    --kby-tgl-wdt:calc((var(--kby-tgl-hgt) * 2) * 0.86);
    --kby-tgl-pdg:0.2rem;
    --kby-rds:2.4rem;
    --kby-rds-inf:9999px;
    --kby-acc-col:#9b1cd5;
    --kby-acc-hvr:hsl(281.19deg 76.53% 53.52%);
    --kby-acc-inv:#fff;
    --kby-frm-bg:#ffffff;
    --kby-frm-brd:#424242;
    --kby-frm-fcs-brd:#424242;
    --kby-frm-fcs-bg:var(--kby-frm-bg);
    --kby-frm-rds:0.4rem;
    interpolate-size: allow-keywords;
    font-size: 62.5%;
}

body {
    font-size:1.6rem;
}

.kby-wrap {
    /* width:100%; */
    /* height:100%; */
    /* display:flex; */
    /* flex-direction: column; */
}

.kby-header {
    flex-shrink: 0;
    height:var(--kby-hdr-hgt);
    position: fixed;
}

/* CONTAINER & ROW */

.kby-container {
    display:flex;
    flex-direction: column;
}

.kby-row {
    display:flex;
    align-items: center;
}

/* FORM */

.kby-form {
    display:flex;
    flex-direction: column;
    gap:1.6rem;
}


.kby-form .altcha{
    background:var(--kby-frm-bg);
    border:none;
    outline:0.1rem solid var(--kby-frm-brd);
    border-radius: var(--kby-frm-rds);
}

/* ICON */

.kby-icon {
    width: var(--kby-icn-hgt);
    aspect-ratio: 1;
    flex-shrink: 0;
    pointer-events: none;
}

/* BUTTON */

.kby-button {
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
    display:flex;
    flex-direction: column;
    height:var(--kby-btn-hgt);
    min-width: var(--kby-btn-hgt);
    /* justify-content: center; */
    /* align-items:center; */
    cursor: pointer;
    align-self:start;
    justify-self:start;
    flex-shrink: 0;
}

.kby-button > * {
    pointer-events:none;
    user-select:none;
}

.kby-button .kby-state-active {
    display:none;
}

.kby-button.active .kby-state-active {
    display:flex;
}

.kby-button.active .kby-state-inactive {
    display:none;
}

.kby-button.kby-button-icon {
    max-width: var(--kby-btn-hgt);
}

.kby-button .kby-form-body {
    border-radius: var(--kby-btn-rds);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kby-button .kby-form-body:focus-visible {
    outline:0.24rem solid var(--kby-frm-fcs-brd);
    outline-offset:0.24rem;
}

.kby-button.kby-button-bg .kby-form-body{
    background: var(--kby-acc-col);
    color: var(--kby-acc-inv);
    padding: 0 calc(var(--kby-btn-hgt) / 2);
}

.kby-button.kby-button-iconbg .kby-form-body{
    background: var(--kby-acc-col);
    color: var(--kby-acc-inv);
}


@media (hover: hover) {
  .kby-button .kby-form-body:hover {
    background:var(--kby-acc-hvr);
  }
}


/* FIELD */

.kby-field {
    height:var(--kby-fld-hgt);
    display: flex;
    flex-direction: column;
}

.kby-field .kby-form-body {
    display: flex;
    align-items: center;
    flex: 1;
    outline: 0.12rem solid var(--kby-frm-brd);
    border-radius: var(--kby-frm-rds);
    background: var(--kby-frm-bg);
    cursor: text;
    position: relative;
}

.kby-field .kby-form-body:has(input:focus-visible) {
    outline:0.24rem solid var(--kby-frm-fcs-brd);
    background:var(--kby-frm-fcs-bg);
}

.kby-field label {
    pointer-events:none;
    position: absolute;
    top: 0;
    left: 0.8rem;
    padding: 0 0.4rem;
    max-width: calc(100% - 0.8rem);
    transform: translateY(calc((var(--kby-fld-hgt) / 2) - 50%));
    transition: transform 120ms cubic-bezier(.25,.29,.19,.98);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform-origin:top left;
    border-radius: 0.4rem;
}

.kby-field:has(input:focus-visible) label,
.kby-field:has(input:not(:placeholder-shown)) label {
    transform: translateY(-50%) scale(0.84);
}

.kby-field:has(input:not(:placeholder-shown)) label {
    background: var(--kby-frm-bg);
}

.kby-field:has(input:focus-visible) label {
    background: var(--kby-frm-fcs-bg);
}

.kby-field input {
    flex: 1;
    padding-left: 1.2rem;
    align-self: stretch;
}

.kby-field input::placeholder {
    visibility:hidden;
}


/* NUMBER */

.kby-number .kby-form-body {
    padding-right: 0.8rem;
}

.kby-number input::-webkit-outer-spin-button,
.kby-number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.kby-number input {
  -moz-appearance: textfield;
  padding-right: 0.2em;
}

.kby-number .kby-number-unit {
    font-size: 84%;
    visibility:hidden;
    pointer-events: none;
    user-select: none;
}

.kby-number:has(input:focus-visible) .kby-number-unit,
.kby-number:has(input:not(:placeholder-shown)) .kby-number-unit {
    visibility:visible;
}

/* AREA */

.kby-area {display: flex;flex-direction: column;}

.kby-area .kby-form-body{
    outline:0.12rem solid var(--kby-frm-brd);
    border-radius:var(--kby-frm-rds);
    background:var(--kby-frm-bg);
    display: flex;
    flex-direction: column;
    position: relative;
}

.kby-area .kby-form-body:has(textarea:focus-visible) {
    outline:0.24rem solid var(--kby-frm-fcs-brd);
    background:var(--kby-frm-fcs-bg);
}

.kby-area label{
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0.8rem;
    padding: 0 0.4rem;
    max-width: calc(100% - 0.8rem);
    transform: translateY(calc((var(--kby-fld-hgt) / 2) - 50%));
    transition: transform 120ms cubic-bezier(.25, .29, .19, .98);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform-origin: top left;
    border-radius: 0.4rem;
}

.kby-area:has(textarea:focus-visible) label,
.kby-area:has(textarea:not(:placeholder-shown)) label {
    transform: translateY(-50%) scale(0.84);
}

.kby-area:has(textarea:not(:placeholder-shown)) label {
    background: var(--kby-frm-bg);
}

.kby-area:has(textarea:focus-visible) label {
    background: var(--kby-frm-fcs-bg);
}

.kby-area textarea {
    resize: vertical;
    height: 12rem;
    max-height: 36rem;
    min-height:12rem;
    padding: 1.2rem;
}

.kby-area textarea::placeholder {
    color: transparent;
}

/* iOS Safari / Chrome / Modern Edge 
.kby-area textarea::-webkit-input-placeholder {
    color: transparent;
}*/

/* LIST */


.kby-list {
    padding-left: 1.6rem;
    list-style: initial;
    margin-bottom: 1.6rem;
}

.kby-list li{
    margin-bottom: 0.4rem;
}


/* TOGGLE */

.kby-toggle {
    user-select: none;
}

.kby-toggle label {
    display:flex;
    align-items: center;
    align-self: start;
    justify-self: start;
    gap: 0.8rem;
    cursor: pointer;
}

.kby-toggle-switch {
    width: var(--kby-tgl-wdt);
    height: var(--kby-tgl-hgt);
    background: #e0e0e0;
    border-radius: var(--kby-rds-inf);
    position: relative;
    transition: background 140ms;
    padding: var(--kby-tgl-pdg) ;
}

.kby-toggle-slider {
    position: absolute;
    height:calc(var(--kby-tgl-hgt) - (var(--kby-tgl-pdg) * 2));
    aspect-ratio: 1;
    background: white;
    border-radius: var(--kby-rds-inf);
    transition: transform 140ms;
    box-shadow: 0 0.2rem 0.4rem rgba(0,0,0,0.12);
}

.kby-toggle:has(input:checked) .kby-toggle-switch {
    background: var(--kby-acc-col);
}

.kby-toggle:has(input:checked) .kby-toggle-slider {
    transform: translateX(calc(var(--kby-tgl-wdt) - var(--kby-tgl-hgt)));
}

.kby-toggle:has(input:focus-visible) .kby-toggle-switch {
    outline: 0.24rem solid var(--kby-frm-brd);
    outline-offset: 0.24rem;
}

.kby-toggle:has(input:disabled) .kby-toggle-switch {
    opacity:0.64;
    background: #e0e0e0;
}

.kby-dropdown {
    anchor-name:--kbyDropdownAnchor;
    height: var(--kby-fld-hgt);
    display: flex;
    flex-direction: column;
}

.kby-dropdown .kby-form-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: var(--kby-frm-rds);
    outline: 0.12rem solid var(--kby-frm-brd);
    position: relative;
}

.kby-dropdown:has(button[aria-expanded="true"]) .kby-form-body,
.kby-dropdown:has(button:focus-visible) .kby-form-body{
    outline: 0.24rem solid var(--kby-frm-brd);
}

.kby-dropdown label {
    pointer-events:none;
    position: absolute;
    top: 0;
    left: 0.8rem;
    padding: 0 0.4rem;
    max-width: calc(100% - 0.8rem);
    transform: translateY(-50%) scale(0.84);
    transition: transform 120ms cubic-bezier(.25,.29,.19,.98);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    transform-origin:top left;
    border-radius: 0.4rem;
    background: var(--kby-frm-bg);
}

.kby-dropdown button{
    flex: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 1.2rem;
}

.kby-dropdown [popover] {
    position-anchor: --kbyDropdownAnchor;
    top: anchor(--kbyDropdownAnchor bottom);
    left: anchor(--kbyDropdownAnchor left);
    scrollbar-width: none;
    margin-top:0.24rem;
}

.kby-dropdown .kby-dropdown-body {
    height:0;
    animation: dropdownEnter 140ms ease-out;
    animation-fill-mode: forwards;
}

.kby-dropdown ul li.kby-focus {
    outline: 0.24rem solid var(--kby-frm-brd);
    outline-offset: -0.24rem; 
}

@keyframes dropdownEnter {
    to {
       height:auto;
    }  
}