//- Creates our basic border for inputs
%inputHighlight{
  border-width: 1px 3px;
  border-style: solid;
  border-color: var(--borderColor);
  border-radius: 5px;
  box-sizing: border-box;
}
%base-border{
  border-width: 1px 3px;
  border-style: solid;
  border-radius: 5px;
  border-color: transparent;
  box-sizing: border-box;
}
//- Styling for elements that should have a box around them
%boxed{
  border: 2px solid var(--borderColor);
  border-radius:0;
  box-sizing:border-box;
}
%borderStyles{
  .boxed,
  .sheet-boxed{
    @extend %boxed;
    &.thick-left{
      border-left-width: 5px;
    }
    &.thick-bottom{
      border-bottom-width: 5px;
    }
    &.thick-right{
      border-right-width: 5px;
    }
    &.thick-top{
      border-top-width: 5px;
    }
  }
  .underlined,
  .sheet-underlined{
    @extend %base-border;
    border-radius: 0;
    border-bottom: 1px solid var(--borderColor);
    transition: var(--focusTrans);
  }
  :is(.underlined,.boxed){
    &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:hover, :focus,:focus-within){
      @extend %inputHighlight;
    }
    &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:focus,:focus-within){
      background-color: var(--subHeadBackColor);
    }
  }
  .underlined--invisible{
    border-color:transparent !important;
  }
}
%sectionBoxShadow{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}