////
/// @group borders
////
//- Creates our basic border for inputs
/// Creates the default highlight styling for inputs/selects
@mixin inputHighlight{
  border-width: 1px 3px;
  border-style: solid;
  border-color: var(--borderColor);
  border-radius: 5px;
  box-sizing: border-box;
}
///Basic border styling for elements
@mixin 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
@mixin boxed{
  border: 2px solid var(--borderColor);
  border-radius:0;
  box-sizing:border-box;
}
/// Utility classes that are provided to easily apply a variety of border styles to your elements.
/// @group utility
@mixin borderStyles{
  .boxed,
  .sheet-boxed{
    @include 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{
    @include base-border;
    border-radius: 0;
    border-bottom: 1px solid var(--borderColor);
    transition: border-radius border var(--revealTrans);
  }
  :is(.underlined,.boxed){
    &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:hover, :focus,:focus-within){
      @include inputHighlight;
    }
    &:not([readonly]):not([type='checkbox']):not([type='radio']):is(:focus,:focus-within){
      background-color: var(--disabledColor);
    }
  }
  .underlined--invisible{
    border-color:transparent !important;
  }
}
@mixin sectionBoxShadow{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}