@import "~theme/factory";

/**
 * Text and Titles - Implement all guidelines for text content
 */

.md-caption {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 17px;
}

.md-body-1 {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 20px;
}

.md-body-2 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 24px;
}

.md-subheading {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 24px;
}

.md-title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .005em;
  line-height: 26px;
}

.md-headline {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 32px;
}

.md-display-1 {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 40px;
}

.md-display-2 {
  font-size: 45px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 48px;
}

.md-display-3 {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 58px;
}

.md-display-4 {
  font-size: 112px;
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 112px;
}


/**
 * Links and Buttons - Create consise links across all the application
 */
/*
   ========================================================================== */

a:not(.md-button) {
  text-decoration: none;

  &:hover {
    opacity: .8;
    text-decoration: underline;
  }
}

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