@use "sass:math";

@use "sass:color";
@use "colors";
@use "mixins";
@use "variables";

// =Typography
// ----------------------------------------------------------------------------
body {
  @include mixins.square;

  background: var(--ply-bg-body, colors.$background-body);
  color: var(--ply-color-body, colors.$color-body);
  font-family: var(--ply-font-body, #{variables.$font-family-base});
  font-size: variables.$font-size-base;
  line-height: variables.$base-line;
  overflow: auto;
  transition: background 0.2s ease, color 0.2s ease;
}

// =Links
// ----------------------------------------------------------------------------
a {
  @include mixins.transition;

  color: var(--ply-color-link, colors.$color-link);

  &:focus,
  &:hover {
    color: var(--ply-color-link-hover, colors.$color-link-hover);
  }
}

// =Headings
// ----------------------------------------------------------------------------
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: var(--ply-color-headings, colors.$color-headings);
  font-family: var(--ply-font-heading, #{variables.$font-family-headings});
  font-weight: variables.$header-font-weight;
  margin: 0 0 0.5rem;
  text-rendering: optimizeLegibility;
}

h1,
.h1,
h2,
.h2 {
  line-height: variables.$line-height-tight;
}

h3,
.h3,
h4,
.h4 {
  line-height: variables.$line-height-snug;
}

h1,
.h1 {
  font-size: variables.$font-size-h1-lg;
}

h2,
.h2 {
  font-size: variables.$font-size-h2-lg;
}

h3,
.h3 {
  font-size: variables.$font-size-h3-lg;
}

h4,
.h4 {
  font-size: variables.$font-size-h4-lg;
}

h5,
.h5 {
  font-size: variables.$font-size-h5-lg;
  font-weight: normal;
}

h6,
.h6 {
  font-size: variables.$font-size-h6-lg;
  font-weight: bold;
  text-transform: uppercase;
}


// =Lead
// ----------------------------------------------------------------------------
.lead-subhead,
.lead {
  font-size: variables.$font-size-lead;
  line-height: variables.$line-height-lead;
  margin-bottom: 1rem;
}

// =Line height and margin
// ----------------------------------------------------------------------------
p,
ul,
ol,
dl,
dd,
dt,
blockquote,
td,
th {
  line-height: variables.$base-line;
}

ul,
ol,
ul ul,
ol ol,
ul ol,
ol ul {
  margin: 0 0 0 2rem;
}

ul li,
ol li {
  text-align: left;
}

ol ol li {
  list-style-type: lower-alpha;
}

ol ol ol li {
  list-style-type: lower-roman;
}

// =Definition list
// ----------------------------------------------------------------------------
dl dt {
  font-weight: bold;
}

dd {
  margin-left: variables.$base-line;
}

p,
ul,
ol,
dl,
blockquote,
hr,
pre,
table,
form,
fieldset,
figure,
address {
  margin-bottom: variables.$base-line;
}

// =Blockquote
// ----------------------------------------------------------------------------
blockquote {
  position: relative;
  font-style: italic;
  font-size: variables.$font-size-lg;
  margin-left: variables.$base-line * 1.5;
  padding-left: variables.$base-line;
  border-left: 2px solid var(--ply-border-color, colors.$color-blockquote-border);

  p {
    margin-bottom: 0.5rem;
  }
}

small,
blockquote small,
blockquote p.small,
blockquote p.citation
cite,
blockquote cite {
  color: var(--ply-color-muted);
  font-style: italic;
  font-size: variables.$font-size-small;
  line-height: 1;

  a {
    text-decoration: none;
  }
}


// =Address
// ----------------------------------------------------------------------------
address {
  font-style: normal;
}

// =Text-level
// ----------------------------------------------------------------------------
s,
del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted var(--ply-color-body, colors.$color-black);
  cursor: help;
}

strong,
b {
  font-weight: bold;
}

em,
i {
  font-style: italic;
}

sub,
sup {
  font-size: variables.$font-size-smaller;
  line-height: 0;
  position: relative;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

figcaption {
  margin: .3em 0;
  font-size: variables.$font-size-small;
  font-style: italic;
}

ins,
u {
  text-decoration: underline;
}

mark {
  background-color: var(--ply-color-mark-bg, colors.$color-yellow);
  color: var(--ply-color-mark, colors.$color-black);
  text-decoration: none;
}

// =Code
// ----------------------------------------------------------------------------
pre,
code,
kbd,
samp,
var,
output {
  font-size: 90%;
  font-style: normal;
  font-family: var(--ply-font-mono, #{variables.$font-family-code});
}

pre {
  margin-top: variables.$base-line;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ply-color-body, colors.$color-body);
  background: var(--ply-color-code-bg, colors.$color-code-background);
  border: 1px solid var(--ply-color-code-border, colors.$color-code-border);
  border-radius: var(--ply-border-radius);
  padding: 1rem;
  overflow: auto;
}

code,
samp,
kbd {
  padding: 3px 6px 2px 6px;
  display: inline-block;
  line-height: 1;
  border-radius: 2px;
}

code {
  background: var(--ply-color-code-bg, colors.$color-code-background);
  border: 1px solid var(--ply-color-code-border, colors.$color-code-border);
}

pre code {
  font-size: 100%;
  border: none;
  padding: 0;
  background: none;
  line-height: variables.$base-line;
}

var {
  color: var(--ply-color-muted);
}

samp {
  background: var(--ply-color-code-bg, colors.$color-blue-pastel);
  border: 1px solid var(--ply-color-code-border, color.adjust(colors.$color-blue-pastel, $lightness: -7%));
}

kbd {
  background: var(--ply-color-body, colors.$color-black);
  color: var(--ply-bg-body, rgba(255, 255, 255, .85));
  white-space: nowrap;
}

// =Form
// ----------------------------------------------------------------------------
button:active {
  outline: none;
}

textarea,
select {
  font-family: var(--ply-font-body, #{variables.$font-family-controls});
  font-size: 1em;
  box-shadow: none;
}

textarea,
select[multiple],
select[multiple="multiple"] {
  padding: variables.$padding-input;
  line-height: 1.35em;
  width: 100%;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"] {
  font-family: var(--ply-font-body, #{variables.$font-family-controls});
  font-size: 1em;
  box-shadow: none;
  padding: variables.$padding-input;
  line-height: variables.$base-line;
  border-radius: 0;
  outline: none;
}

select[multiple],
select[multiple="multiple"],
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"] {
  background: var(--ply-color-input-bg, colors.$color-white);
  border: 1px solid var(--ply-color-input-border, colors.$color-input-border);
  color: var(--ply-color-body, colors.$color-body);
  position: relative;
  z-index: 2;
  appearance: none;
}

textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="phone"],
input[type="tel"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="color"],
input[type="time"],
input[type="search"],
input[type="datetime-local"] {
  &[disabled] {
    resize: none;
    color: var(--ply-color-muted);
  }
}

select,
input[type="checkbox"],
input[type="radio"] {
  &[disabled] {
    cursor: default;
  }
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input[type="range"] {
  position: relative;
  top: 3px;
}

select {
  margin-bottom: 0 !important;
}

fieldset {
  padding: variables.$base-line;
  margin-bottom: variables.$base-line;
  border: 1px solid var(--ply-border-color, colors.$color-fieldset-border);
  & *:last-child {
    margin-bottom: 0 !important;
  }
}

legend {
  font-weight: bold;
  padding: 0 1em;
  margin-left: -1em;
}


// =Tables
// ----------------------------------------------------------------------------
table {
  max-width: 100%;
  width: 100%;
  empty-cells: show;

  caption {
    text-transform: uppercase;
    padding: 0 math.div(variables.$base-line, 1.5);
    color: var(--ply-color-muted);
    font-size: variables.$font-size-small;
  }

  th,
  td {
    border-bottom: 1px solid var(--ply-color-table-border, colors.$color-table-border);
    padding: variables.$base-line * 0.5 math.div(variables.$base-line, 1.5);
  }

  tfoot th,
  tfoot td {
    color: var(--ply-color-muted);
  }
}

// =Typography Responsive
// -----------------------------------------------------------------------------

// Portrait tablet to landscape and desktop
@media (min-width: 768px) and (max-width: 979px) {
  h1 {
    font-size: variables.$font-size-h1-md;
    line-height: variables.$line-height-tight;
  }

  h2 {
    font-size: variables.$font-size-h2-md;
    line-height: variables.$line-height-tight;
  }

  h3 {
    font-size: variables.$font-size-h3-md;
    line-height: variables.$line-height-snug;
  }

  h4 {
    font-size: variables.$font-size-h4-md;
    line-height: variables.$line-height-snug;
  }

  h5 {
    font-size: variables.$font-size-h5-md;
  }

  h6 {
    font-size: variables.$font-size-h6-md;
  }
}

// Landscape phone to portrait tablet
@media (max-width: 767px) {
  h1 {
    font-size: variables.$font-size-h1-sm;
    line-height: variables.$line-height-tight;
  }

  h2 {
    font-size: variables.$font-size-h2-sm;
    line-height: variables.$line-height-tight;
  }

  h3 {
    font-size: variables.$font-size-h3-sm;
    line-height: variables.$line-height-snug;
  }

  h4 {
    font-size: variables.$font-size-h4-sm;
    line-height: variables.$line-height-snug;
  }

  h5 {
    font-size: variables.$font-size-h5-sm;
  }

  h6 {
    font-size: variables.$font-size-h6-sm;
  }

  .lead,
  .lead-subhead {
    font-size: variables.$font-size-lg;
  }

  ul,
  ol,
  ul ul,
  ol ol,
  ul ol,
  ol ul {
    margin-left: variables.$base-line;
  }

  blockquote {
    margin-left: 0;
  }
}