$white:         #ffffff;
$gray-bright:   #eeeeee;
$gray-dark:     #303336;
$gray-darker:   #1d1f21;
$gray-neutral:  #b9bdc1;
$gray-success:  #bdddc1;
$gray-fail:     #ddbdc1;

$break-small: 425px;
$break-large: 768px;

@mixin media-small() {
  @media only screen and (max-width: $break-small) { @content; }
}

@mixin media-medium() {
  @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
}

@mixin media-large() {
  @media only screen and (min-width: $break-large) { @content; }
}

:root {
  --white:        #{$white};
  --gray-bright:  #{$gray-bright};
  --gray-dark:    #{$gray-dark};
  --gray-darker:  #{$gray-darker};
  --gray-neutral: #{$gray-neutral};
  --gray-success: #{$gray-success};
  --gray-fail:    #{$gray-fail};

  --margin-wide: 2rem;
  @include media-small() {
    --margin-wide: 0.5rem;
  }
}

@mixin left-border($w: 0.6rem) {
  border-style: solid;
  border-width: 0 0 0 $w;
  border-radius: 0 6px 6px 0;
}

@mixin right-border($w: 0.6rem) {
  border-style: solid;
  border-width: 0 $w 0 0;
  border-radius: 6px 0 0 6px;
}