/*
  Z-Indicies
 */
$dropdown-z-index: 30;
$token-icon-z-index: 15;
$container-z-index: 15;
$header-z-index: 12;
$mobile-header-z-index: 26;
$main-container-z-index: 18;
$send-card-z-index: 20;
$sidebar-z-index: 26;
$sidebar-overlay-z-index: 25;

// Flex
%row-nowrap {
  display: flex;
  flex-flow: row nowrap;
}

%col-nowrap {
  display: flex;
  flex-flow: column nowrap;
}

// Background Image Sizing
%bg-contain {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

%ellipsify {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

%modal {
  background-color: $white;
  border-radius: 10px;
  box-shadow: 0 5px 16px rgba($black, 0.25);;
}

/*
  Z Indicies - Current
  app - 11
  hex/bn as decimal input - 1 - remove?
  dropdown - 11
  loading - 10 - higher?
  mascot - 0 - remove?
 */


/*
  Spacing Variables
*/
$no-spacing: 0;
$xxs-spacing: 4px;
$xs-spacing: 8px;
$s-spacing: 16px;
$base-spacing: 24px;
$medium-spacing: 32px;
$large-spacing: 40px;
$xlarge-spacing: 48px;
$xxlarge-spacing: 64px;


%input {
  background: $white;
  border: 1px solid $Grey-100;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  font-size: 1.25rem;
}
// Input mixin

%input-2 {
  border: 2px solid $Grey-200;
  border-radius: 6px;
  color: $Grey-800;
  padding: 0.875rem 1rem;
  font-size: 1.125rem;

  &:focus-within {
    border-color: $Blue-500;
  }
}