@use 'borderPlaceholders';
//- Placeholder for applying our checked styling to something
%checked{
  &:before{
    content: '\2713';
    grid-area:content;
    font-weight:bold;
    place-self:start center;
    color: var(--checkColor);
    font-size: 1.5rem;
    line-height: 0.5rem;
  }
}
//- Some styling to highlight which input is currently being interacted with.
%inputBase{
  input{
    width: auto;
    font-family: var(--topHeaderFont);
    &:placeholder{
      color: #ededed80;
    }
    &.plus-control:not([value*="-"]) + span:before{
      content: '+';
    }
    &[readonly]{
      border:0;
    }
    &:is([type='checkbox'],[type='radio']){
      border: 1px solid var(--borderColor);
      cursor: pointer;
      -webkit-appearance:none;
      appearance:none;
      width: 14px;
      min-width: 14px;
      height: 14px;
      min-height: 14px;
      display:grid;
      grid-template-columns:1fr;
      grid-template-areas:"content";
      &:not(.collapse):not(.fill-left__radio):checked{
        @extend %checked;
      }
    }
    &[type='number']{
      width: 3rem;
      -moz-appearance: textfield !important;
      text-align: center;
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button{
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
  select,
  .pseudo-select span,
  .sheet-pseudo-select span,
  textarea,
  input:not(:is([type='radio'],[type='checkbox'])),
  .uneditable-input{
    padding: 2px;
  }
  input:is([type="text"],[type="number"]),textarea{
    cursor:auto;
  }
  select,
  .pseudo-select span,
  .sheet-pseudo-select span,
  input:not(:where([type='checkbox'], [type='radio'])),
  .uneditable-input,
  textarea{
    @extend %base-border;
  }
  select,
  .sheet-pseudo-select span,
  .pseudo-select span{
    -webkit-apperance: none;
    appearance: none;
    text-transform: capitalize;
    overflow: hidden!important;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    color:var(--fontColor);
  }
  textarea{
    resize: vertical;
    white-space: pre-wrap;
    &.fixed{
      resize: none;
      overflow: auto;
    }
  }
}