/**
 * Structure - The main styles for html and body tags
 */
* {
  box-sizing: border-box;
}

html {
  height: 100%;
  box-sizing: border-box;
}

body {
  min-height: 100%;
  margin: 0;
  position: relative;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  background-color: var(--md-background);
  color: var(--md-on-background);

  @extend %md-body-1;
}

/**
 * Overrides - Apply fluid media styles
 */
audio,
img,
object,
embed,
canvas,
video,
iframe {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;

  &:not(.md-image) {
    height: auto;
  }
}

/**
 * Suppress the focus outline on links that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */
[tabindex='-1']:focus {
  outline: none !important;
}

:not(input, textarea)::selection {
  background-color: var(--md-secondary);
  color: var(--md-on-secondary);
}

/**
 * Links & Buttons
 */
a:not(.md-button) {
  transition: 0.3s $md-transition-stand-timing;
  transition-property: color, background-color, opacity;
  text-decoration: none;
  color: var(--md-primary);

  &:hover {
    text-decoration: underline;
    opacity: 0.8;
  }

  &.md-accent {
    color: var(--md-secondary);
  }

  &:focus {
    text-decoration: none;
  }
}

a.md-button {
  text-decoration: none;
}

button {
  &:focus {
    outline: none;
  }
}

/**
 * Text and Titles - Implement all guidelines for text content
 */
.md-caption {
  font-size: 12px;
  letter-spacing: 0.4px;
  line-height: 16px;
}

.md-body-1,
%md-body-1 {
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 24px;
}

.md-body-2 {
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 20px;
}

.md-subheading {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 24px;
}

.md-subtitle-1 {
  font-size: 16px;
  letter-spacing: 0.15px;
  line-height: 24px;
}

.md-headline-6 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.15px;
  line-height: 24px;
}

.md-headline-5 {
  font-size: 24px;
  letter-spacing: 0.18px;
  line-height: 24px;
}

.md-headline-4 {
  font-size: 34px;
  line-height: 36px;
}

.md-headline-3 {
  font-size: 48px;
  line-height: 56px;
}

.md-headline-2 {
  font-size: 60px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 72px;
}

.md-headline-1 {
  font-size: 96px;
  font-weight: 300;
  letter-spacing: -1.5px;
  line-height: 112px;
}