/*input-1*/
.if1{
  align-items:center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--rd-md);
  display:grid;
  grid-gap:var(--sp-sm);
  grid-template-columns: min-content 1fr;
  padding: var(--sp-sm) var(--sp-md)}
.if1:hover{
  background: var(--bg)}
.if1:focus-within{
  box-shadow: var(--sh-fc)}
  .if1 input,
  .if1 select{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font-size: var(--fs-md)}
  .if1 select{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer}
/*input-2*/
.if2{
  display:grid;
  grid-auto-rows: min-content;
  grid-gap: var(--sp-sm)}
    .if2 label{
      font-size: var(--fs-sm);
      color: var(--text-muted)}
    .if2 div{
      background: var(--bg-2);
      border:1px solid var(--border);
      border-radius: var(--rd-md);
      padding: var(--sp-sm) var(--sp-md)}
    .if2:hover div{
      background: var(--bg)}
    .if2 div:focus-within{
      box-shadow: var(--sh-fc)}
    .if2 input,
    .if2 textarea,
    .if2 select{
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:var(--text);
      font-size: var(--fs-md);
      min-width:0}
    .if2 input::placeholder,
    .if2 textarea::placeholder,
    .if2 select::placeholder{
      color: var(--text-muted)}
    .if2 textarea{
      resize: none;
      min-height: 90px}
    .if2 select{
      appearance:none;
      -webkit-appearance:none;
      cursor:pointer}
    
/*checkbox*/
.cb{
  align-items:center;
  color: var(--text);
  display:grid;
  grid-template-areas: "a b";
  grid-template-columns: min-content 1fr; 
  gap:var(--sp-sm);
  user-select:none}
.cb.theme-red{
  grid-template-areas: "a b" "c c"}
  .cb input{
    accent-color: var(--bg-2);
    grid-area: a;
    height:var(--fs-md);
    width:var(--fs-md)}
  .cb .b{grid-area: b}
  .cb .error{grid-area: c}
/*file*/
.fl{
  display: grid;
  grid-gap: var(--sp-sm)}
  .fl label{
    color: var(--text-muted);
    font-size: var(--fs-sm)}
  [type="file"]{display: none}
  .fl-drop{
    background: var(--bg-2);
    border: 2px dashed var(--border);
    border-radius: var(--rd-md);
    cursor:pointer;
    display: none;
    padding: var(--sp-lg);
    place-items:center;
    text-align:center;
    outline: none;
    transition: 
      transform .12s ease, 
      border-color .12s ease, 
      background .12s ease}
  .fl-drop:active{transform: scale(.99)}
  .fl-drop:hover{background: var(--bg)}
    .fl-drop .icon{
      --icon-size: 44px;}
    .fl-drop .a{
      color: var(--text);
      font-weight: 600}
  .fl-drop.on{
    display: grid}
  .ii-list{
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--rd-md);
    display: none;
    grid-gap: var(--sp-sm);
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    overflow-x: auto;
    padding: var(--sp-md);
    scroll-snap-type: x mandatory; 
    scroll-padding: var(--sp-md);         
    -webkit-overflow-scrolling: touch}
  .ii-list.on{
    display: grid}
  .ii-list:hover{background: var(--bg)}
    .ii-list .item{
      display:grid;
      grid-auto-rows: max-content;
      grid-gap: var(--sp-sm);
      grid-template-areas: "a";
      min-width: 0;
      scroll-snap-align: start;
      width:100%}
      .ii-list  img{
        border: 1px solid var(--border);
        border-radius: var(--sp-sm);
        grid-area: a;
        height: 120px;
        object-fit: cover;
        width: 120px} 
      .ii-list button{
        grid-area: a;
        margin: var(--sp-sm);
        place-self: start end}   
  .fl-list{
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--rd-md);
    display: none;
    grid-gap: var(--sp-sm);
    grid-auto-flow: column;
    grid-auto-columns: 180px;
    overflow-x: auto;
    padding: var(--sp-md);
    scroll-snap-type: x mandatory; 
    scroll-padding: var(--sp-md);         
    -webkit-overflow-scrolling: touch}
  .fl-list.on{
    display: grid}
  .fl-drop.theme-yellow{
    outline: 2px dashed var(--border-2);
    outline-offset: 4px}
    .fl-list .item{
      align-items: center;
      display: grid;
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-radius: var(--rd-md);
      grid-template-columns: 1fr min-content;
      grid-template-areas: "a b" "c b";
      padding: var(--sp-sm) var(--sp-md);
      width:  180px}
    .fl-list .item:hover{
      background: var(--bg)}
      .fl-list .a{
        grid-area: a}
      .fl-list button{
        grid-area: b}
      .fl-list .c{
        grid-area: c}