//
// Component: Heading
//
// ========================================================================


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

@heading-small-font-size-m:                     56px;
@heading-small-line-height:                     0.9;

@heading-medium-font-size-l:                    75px;
@heading-medium-line-height:                    0.85;

@heading-large-line-height:                     0.8;

@heading-xlarge-font-size-l:                    8.5rem;
@heading-xlarge-line-height:                    0.8;

@heading-2xlarge-font-size-l:                   12rem;
@heading-2xlarge-line-height:                   0.8;

@heading-divider-padding-bottom:                0.07em;
@heading-divider-border-width:                  0.12em;
@heading-divider-border:                        @global-emphasis-color;

@heading-bullet-top:                            ~'calc(-0.095 * 1em)';
@heading-bullet-height:                         ~'calc(4px + 0.74em)';
@heading-bullet-border-width:                   ~'calc(1.5px + 0.15em)';
@heading-bullet-border:                         @global-primary-background;

@heading-line-width:                            45px;
@heading-line-border-width:                     ~'calc(0.12em)';
@heading-line-border:                           @global-secondary-background;


// Component
// ========================================================================

.hook-heading-small() {}

.hook-heading-medium() {}

.hook-heading-large() {}

.hook-heading-xlarge() {}

.hook-heading-2xlarge() {}


// Divider
// ========================================================================

.hook-heading-divider() {}


// Bullet
// ========================================================================

.hook-heading-bullet() {}


// Line
// ========================================================================

.hook-heading-line() {}



// Miscellaneous
// ========================================================================

.hook-heading-misc() {}


// Inverse
// ========================================================================

@inverse-heading-divider-border:                  @inverse-global-emphasis-color;
@inverse-heading-line-border:                     @inverse-global-emphasis-color;

.hook-inverse-heading-small() {}

.hook-inverse-heading-medium() {}

.hook-inverse-heading-large() {}

.hook-inverse-heading-xlarge() {}

.hook-inverse-heading-2xlarge() {}

.hook-inverse-heading-divider() {}

.hook-inverse-heading-bullet() {}

.hook-inverse-heading-line() {}
