@import "../../styles/themes.scss";
@import "../../styles/typography.scss";

.example-padding {
  padding: 13px 0;
}

.main-title {
  @include font-main();
  @include theme-prop(color, primary-text-color);
}

.title {
  @include font-title();
  @include theme-prop(color, primary-text-color);
}

.sub-secondary {
  @include font-title-secondary();
  @include theme-prop(color, primary-text-color);
}

.subtitle {
  @include font-subtitle();
  @include theme-prop(color, primary-text-color);
}

.paragraph {
  @include font-paragraph();
  @include theme-prop(color, primary-text-color);
}

.paragraph-bold {
  @include font-paragraph-bold();
  @include theme-prop(color, primary-text-color);
}

.input {
  @include font-input();
  @include theme-prop(color, primary-text-color);
}

.link {
  @include font-link();
}

.caption {
  @include font-caption();
}

.typo-row {
  height: 80px;
  border-bottom: 1px solid var(--ui-border-color);
  width: 100%;
  display: flex;
  align-items: center;
  &.typo-row-header {
    background-color: var(--label-background-color);
    font-size: 14px;
    color: var(--secondary-text-color);
    height: 50px;
    line-height: 22px;
    font-weight: 300;
    .style {
      padding-left: 8px;
    }
  }
  .style,
  .weight,
  .size,
  .line-height,
  .spacing {
    width: 14%;
  }
  .comments {
    width: 28%;
  }
  .weight,
  .size,
  .line-height,
  .spacing,
  .comments {
    color: var(--secondary-text-color);
    font-size: 16px;
    font-weight: 300;
    text-align: center;
  }
}