@import "sass-zero/variables";
@import "sass-zero/mixins";

$breadboard-bg:  $white    !default;
$breadboard-200: $gray-200 !default;
$breadboard-300: $gray-300 !default;
$breadboard-700: $gray-700 !default;
$breadboard-900: $gray-900 !default;

$breadboard-svg-fill: "%23a0aec0" !default;

html {
  background-color: $breadboard-bg;
  color: $breadboard-700;
  @include antialiased;
}

body {
  font-size: $text-base;
  line-height: $leading-normal;
}

blockquote {
  border-color:  $breadboard-300;
  border-left-width: $border-4;
  padding: $size-3 $size-4;

  *:last-child {
    margin-bottom: $size-0;
  }
}

button,
input[type='button'],
input[type='reset'],
input[type='submit'] {
  background-color: $breadboard-900;
  border-radius: $rounded;
  color: $white;
  cursor: pointer;
  font-weight: $font-bold;
  padding: $size-2 $size-3;

	&:hover {
		background-color: $breadboard-700;
  }

  &[disabled] {
    background-color: $breadboard-900;
    cursor: default;
    opacity: $opacity-50;
  }
}

code {
	background: $breadboard-200;
  border-radius: $rounded;
	font-size: $text-sm;
	margin: 0 $size-1;
	padding: $size-1 $size-2;
	white-space: nowrap;
}

pre {
	background: $breadboard-200;
  border-color: $breadboard-900;
	border-left-width: $border-4;
	overflow-y: hidden;

	& > code {
    border-radius: $rounded-none;
		display: block;
		padding: $size-2 $size-3;
    white-space: pre;
  }
}

hr {
  border-color: $breadboard-300;
  border-top-width: $border;
  margin: $size-4 $size-0;
}

input[type='email'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='tel'],
input[type='text'],
input[type='url'],
input[type='color'],
input[type='date'],
input[type='month'],
input[type='week'],
input[type='datetime'],
input[type='datetime-local'],
input:not([type]),
textarea,
select {
  appearance: none;
  border-color: $breadboard-300;
  border-radius: $rounded;
  border-width: $border;
  display: block;
  padding: $size-2 $size-3;
  width: $size-full;

  &:focus {
    border-color: $breadboard-700;
  }
}

select:not([multiple]) {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$breadboard-svg-fill}"><path d="M15.3 9.3a1 1 0 0 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 1.4-1.4l3.3 3.29 3.3-3.3z"/></svg>');
  background-position: right $size-2 center;
  background-repeat: no-repeat;
  background-size: $size-6;
  padding-right: $size-10;
}

label, legend {
  display: block;
  margin-bottom: $size-1;
}

input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  background-origin: border-box;
  border-color: $breadboard-300;
  border-width: $border;
  color: $breadboard-900;
	display: inline-block;
  margin-bottom: -2.5px;
  height: $size-4;
  width: $size-4;

  &:checked {
    border-color: transparent;
    background-color: currentColor;
    background-position: center;
    background-repeat: no-repeat;
  }
}

input[type='checkbox'] {
  border-radius: $rounded;

  &:checked {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z"/></svg>');
  }
}

input[type='radio'] {
  border-radius: $rounded-full;

  &:checked {
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
  }
}

.label-inline {
	display: inline-block;
	margin-left: $size-1;
}

a {
	color: $breadboard-900;
  cursor: pointer;
  font-weight: $font-medium;
	text-decoration: underline;

  &:hover {
    color: $breadboard-700;
  }
}

ol {
  list-style: decimal inside;
}

ul {
  list-style: circle inside;
}

button,
dd,
dt,
li {
  margin-bottom: $size-2;
}

fieldset,
input,
select,
textarea {
  margin-bottom: $size-4;
}

blockquote,
dl,
figure,
form,
ol,
p,
pre,
table,
ul {
  margin-bottom: $size-6;
}

table {
  width: $size-full;
}

td, th {
  border-color: $breadboard-300;
  border-bottom-width: $border;
  padding: $size-2 $size-4;
  text-align: left;
}

td:first-child, th:first-child {
  padding-left: 0;
}

td:last-child, th:last-child {
  padding-right: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: $font-semibold;
  line-height: $leading-tight;
  margin-bottom: $size-2;
}

h1 {
  font-size: $text-4xl;
}

h2 {
  font-size: $text-3xl;
}

h3 {
  font-size: $text-2xl;
}

h4 {
  font-size: $text-xl;
}

h5 {
  font-size: $text-lg;
}

h6 {
  font-size: $text-base;
}

main {
  @include make-container($size-6, $breakpoint-lg);
}