// Typography
//
// There are 11 contextual typography styles to choose from which can be mixed to suit a large number of text layouts. These styles mimics the [material design typography styles](https://material.google.com/style/typography.html). This means that the default typeface is **Roboto** and the script type is English and English-like (Latin, Greek, and Cyrillic).
//
// Markup:
// <p pam-typography="display-4" pam-Typography-Text>Display 4</p>
// <p pam-typography="display-3" pam-Typography-Text>Display 3</p>
// <p pam-typography="display-2" pam-Typography-Text>Display 2</p>
// <p pam-typography="display-1" pam-Typography-Text>Display 1</p>
// <p pam-typography="headline" pam-Typography-Text>Headline</p>
// <p pam-typography="title" pam-Typography-Text>Title</p>
// <p pam-typography="subheading" pam-Typography-Text>Subheading</p>
// <p pam-typography="body-2" pam-Typography-Text>Body 2</p>
// <p pam-typography="body-1" pam-Typography-Text>Body 1</p>
// <p pam-typography="caption" pam-Typography-Text>Caption</p>
// <p pam-typography="button" pam-Typography-Text>Button</p>
//
// Weight: 3
//
// Style guide: typography

//  Variables
// ==================================================================

@typography-font-family: @font-family;

@typography-display-4-font-size: 7rem;
@typography-display-4-font-weight: @font-weight-light;
@typography-display-4-line-height: @line-height-base;

@typography-display-3-font-size: @font-size-xxlarge;
@typography-display-3-font-weight: @font-weight-normal;
@typography-display-3-line-height: @line-height-base;

@typography-display-2-font-size: 2.8125rem;
@typography-display-2-font-weight: @font-weight-normal;
@typography-display-2-line-height: @line-height-base;

@typography-display-font-size: 2.125rem;
@typography-display-font-weight: @font-weight-normal;
@typography-display-line-height: @line-height-base;

@typography-headline-font-size: @font-size-xlarge;
@typography-headline-font-weight: @font-weight-normal;
@typography-headline-line-height: @line-height-secondary;

@typography-title-font-size: @font-size-larger;
@typography-title-font-weight: @font-weight-medium;
@typography-title-line-height: @line-height-secondary;

@typography-subheading-font-size: @font-size-large;
@typography-subheading-font-weight: @font-weight-normal;
@typography-subheading-line-height: @line-height-secondary;

@typography-body-2-font-size: @font-size-medium;
@typography-body-2-font-weight: @font-weight-medium;
@typography-body-2-line-height: @line-height-secondary;

@typography-body-font-size: @font-size-medium;
@typography-body-font-weight: @font-weight-normal;
@typography-body-line-height: @line-height-secondary;

@typography-caption-font-size: @font-size-xsmall;
@typography-caption-font-weight: @font-weight-normal;
@typography-caption-line-height: @line-height-secondary;

@typography-button-font-size: @font-size-medium;
@typography-button-font-weight: @font-weight-medium;
@typography-button-line-height: @line-height-secondary;

// ==================================================================
//  Typography
// ==================================================================

[pam-typography] {
    font-family: @typography-font-family;

    .hook-typography;
}

//  Display
// ==================================================================

[pam-typography~="display-1"] {
    font-size: @typography-display-font-size;
    font-weight: @typography-display-font-weight;
    line-height: @typography-display-line-height;

    .hook-typography-display-1;
}

[pam-typography~="display-2"] {
    font-size: @typography-display-2-font-size;
    font-weight: @typography-display-2-font-weight;
    line-height: @typography-display-2-line-height;

    .hook-typography-display-2;
}

[pam-typography~="display-3"] {
    font-size: @typography-display-3-font-size;
    font-weight: @typography-display-3-font-weight;
    line-height: @typography-display-3-line-height;

    .hook-typography-display-3;
}

[pam-typography~="display-4"] {
    font-size: @typography-display-4-font-size;
    font-weight: @typography-display-4-font-weight;
    line-height: @typography-display-4-line-height;

    .hook-typography-display-4;
}

//  Headline
// ==================================================================

[pam-typography~="headline"] {
    font-size: @typography-headline-font-size;
    font-weight: @typography-headline-font-weight;
    line-height: @typography-headline-line-height;

    .hook-typography-headline;
}

//  Title
// ==================================================================

[pam-typography~="title"] {
    font-size: @typography-title-font-size;
    font-weight: @typography-title-font-weight;
    line-height: @typography-title-line-height;

    .hook-typography-title;
}

//  Subheading
// ==================================================================

[pam-typography~="subheading"] {
    font-size: @typography-subheading-font-size;
    font-weight: @typography-subheading-font-weight;
    line-height: @typography-subheading-line-height;

    .hook-typography-subheading;
}

//  Body
// ==================================================================

[pam-typography~="body-1"] {
    font-size: @typography-body-font-size;
    font-weight: @typography-body-font-weight;
    line-height: @typography-body-line-height;

    .hook-typography-body-1;
}

[pam-typography~="body-2"] {
    font-size: @typography-body-2-font-size;
    font-weight: @typography-body-2-font-weight;
    line-height: @typography-body-2-line-height;

    .hook-typography-body-2;
}

//  Caption
// ==================================================================

[pam-typography~="caption"] {
    font-size: @typography-caption-font-size;
    font-weight: @typography-caption-font-weight;
    line-height: @typography-caption-line-height;

    .hook-typography-caption;
}

//  Button
// ==================================================================

[pam-typography~="button"] {
    font-size: @typography-button-font-size;
    font-weight: @typography-button-font-weight;
    line-height: @typography-button-line-height;

    .hook-typography-button;
}

//  Deprecated typography
// ==================================================================

// Deprecated
//
// These typography rulez will be deprecated in version **1.0.0+**.
//
// <div pam-Alert="warning" role="alert">
//    <strong>Deprecated:</strong> Styling for legacy typography types. Support will be dropped
//    after PAM version 1.0+.
// </div>
//
// Markup:
// <p pam-typography="subheader" pam-Typography-Text>Subheader</p>
// <p pam-typography="form" pam-Typography-Text>Form</p>
// <p pam-typography="body:strong" pam-Typography-Text>Body strong</p>
// <p pam-typography="small" pam-Typography-Text>Small</p>
//
// Style guide: typography.deprecated

//  Variables

@typography-subheader-font-size: @font-size-large;
@typography-subheader-font-weight: @font-weight-light;
@typography-subheader-line-height: @line-height-secondary;

@typography-form-font-size: @font-size-medium;
@typography-form-font-weight: @font-weight-light;
@typography-form-line-height: @line-height-base;

@typography-small-font-size: @font-size-xxsmall;
@typography-small-font-weight: @font-weight-light;
@typography-small-line-height: @line-height-base;

//  Subheader [deprecated]
// ==================================================================

[pam-typography~="subheader"] {
    font-size: @typography-subheader-font-size;
    font-weight: @typography-subheader-font-weight;
    line-height: @typography-subheader-line-height;

    .hook-typography-subheader;
}

//  Form [deprecated]
// ==================================================================

[pam-typography~="form"] {
    font-size: @typography-form-font-size;
    font-weight: @typography-form-font-weight;
    line-height: @typography-form-line-height;

    .hook-typography-form;
}

//  Body strong [deprecated]
// ==================================================================

[pam-typography~="body:strong"] {
    font-size: @typography-body-font-size;
    font-weight: @font-weight-medium;
    line-height: @typography-body-line-height;

    .hook-typography-body-strong;
}

//  Small [deprecated]
// ==================================================================

[pam-typography~="small"] {
    font-size: @typography-small-font-size;
    font-weight: @typography-small-font-weight;
    line-height: @typography-small-line-height;

    .hook-typography-small;
}

//  Hooks
// ==================================================================

// Hooks
//
// `.hook-typography`
// `.hook-typography-body`
// `.hook-typography-body-2`
// `.hook-typography-body-strong`
// `.hook-typography-button`
// `.hook-typography-caption`
// `.hook-typography-display-1`
// `.hook-typography-display-2`
// `.hook-typography-display-3`
// `.hook-typography-display-4`
// `.hook-typography-form`
// `.hook-typography-headline`
// `.hook-typography-small`
// `.hook-typography-subheader`
// `.hook-typography-subheading`
// `.hook-typography-title`
//
// Style guide: typography.hooks

/* stylelint-disable block-no-empty */
.hook-typography() {
}
.hook-typography-body-1() {
}
.hook-typography-body-2() {
}
.hook-typography-body-strong() {
}
.hook-typography-button() {
}
.hook-typography-caption() {
}
.hook-typography-display-1() {
}
.hook-typography-display-2() {
}
.hook-typography-display-3() {
}
.hook-typography-display-4() {
}
.hook-typography-form() {
}
.hook-typography-headline() {
}
.hook-typography-small() {
}
.hook-typography-subheader() {
}
.hook-typography-subheading() {
}
.hook-typography-title() {
}
/* stylelint-enable */