// Name:            Heading
// Description:     Styles for headings
//
// Component:       `ui-heading-primary`
//                  `ui-heading-hero`
//                  `ui-heading-divider`
//                  `ui-heading-bullet`
//                  `ui-heading-line`
//
// ========================================================================


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

@heading-primary-font-size-l:                   3.75rem;  // 60px
@heading-primary-line-height-l:                 1.1;

@heading-primary-font-size-m:                   @heading-primary-font-size-l * 0.9; // 54px

@heading-primary-font-size:                     @heading-primary-font-size-l * 0.8; // 48px
@heading-primary-line-height:                   1.2;

@heading-hero-font-size-l:                      8rem; // 128px
@heading-hero-line-height-l:                    1;

@heading-hero-font-size-m:                      @heading-hero-font-size-l * 0.75; // 96px
@heading-hero-line-height-m:                    1;

@heading-hero-font-size:                        @heading-hero-font-size-l * 0.5; // 64px
@heading-hero-line-height:                      1.1;

@heading-divider-padding-bottom:                10px;
@heading-divider-border-width:                  @global-border-width;
@heading-divider-border:                        @global-border;

@heading-bullet-top:                            ~'calc(-0.1 * 1em)';
@heading-bullet-height:                         0.9em;
@heading-bullet-margin-right:                   10px;
@heading-bullet-border-width:                   5px;
@heading-bullet-border:                         @global-border;

@heading-line-top:                              50%;
@heading-line-height:                           @heading-line-border-width;
@heading-line-width:                            2000px;
@heading-line-border-width:                     @global-border-width;
@heading-line-border:                           @global-border;
@heading-line-margin-horizontal:                0.6em;


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


/* Primary
 ========================================================================== */

.ui-heading-primary {
    font-size: @heading-primary-font-size;
    line-height: @heading-primary-line-height;
    .hook-heading-primary;
}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .ui-heading-primary { font-size: @heading-primary-font-size-m; }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .ui-heading-primary {
        font-size: @heading-primary-font-size-l;
        line-height: @heading-primary-line-height-l;
    }

}


/* Hero
 ========================================================================== */

.ui-heading-hero {
    font-size: @heading-hero-font-size;
    line-height: @heading-hero-line-height;
    .hook-heading-hero;
}

/* Tablet landscape and bigger */
@media (min-width: @breakpoint-medium) {

    .ui-heading-hero {
        font-size: @heading-hero-font-size-m;
        line-height: @heading-hero-line-height-m;
    }

}

/* Desktop and bigger */
@media (min-width: @breakpoint-large) {

    .ui-heading-hero {
        font-size: @heading-hero-font-size-l;
        line-height: @heading-hero-line-height-l;
    }

}


/* Divider
 ========================================================================== */

.ui-heading-divider {
    padding-bottom: @heading-divider-padding-bottom;
    border-bottom: @heading-divider-border-width solid @heading-divider-border;
    .hook-heading-divider;
}


/* Bullet
 ========================================================================== */

.ui-heading-bullet { position: relative; }

/*
 * 1. Using `inline-block` to make it work with text alignment
 * 2. Center vertically
 * 3. Style
 */

.ui-heading-bullet::before {
    content: "";
    /* 1 */
    display: inline-block;
    /* 2 */
    position: relative;
    top: @heading-bullet-top;
    vertical-align: middle;
    /* 3 */
    height: @heading-bullet-height;
    margin-right: @heading-bullet-margin-right;
    border-left: @heading-bullet-border-width solid @heading-bullet-border;
    .hook-heading-bullet;
}


/* Line
 ========================================================================== */

/*
 * Clip the child element
 */

.ui-heading-line { overflow: hidden; }

/*
 * Extra markup is needed to make it work with text align
 */

.ui-heading-line > * {
    display: inline-block;
    position: relative;
}

/*
 * 1. Center vertically
 * 2. Make the element as large as possible. It's clipped by the container.
 * 3. Style
 */

.ui-heading-line > ::before,
.ui-heading-line > ::after {
    content: "";
    /* 1 */
    position: absolute;
    top: ~'calc(@{heading-line-top} - (@{heading-line-height} / 2))';
    /* 2 */
    width: @heading-line-width;
    /* 3 */
    border-bottom: @heading-line-border-width solid @heading-line-border;
    .hook-heading-line;
}

.ui-heading-line > ::before {
    right: 100%;
    margin-right: @heading-line-margin-horizontal;
}
.ui-heading-line > ::after {
    left: 100%;
    margin-left: @heading-line-margin-horizontal;
}


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

.hook-heading-misc;

.hook-heading-primary() {}
.hook-heading-hero() {}
.hook-heading-divider() {}
.hook-heading-bullet() {}
.hook-heading-line() {}
.hook-heading-misc() {}


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

@inverse-heading-divider-border:                  @inverse-global-border;
@inverse-heading-bullet-border:                   @inverse-global-border;
@inverse-heading-line-border:                     @inverse-global-border;

.hook-inverse() {

    .ui-heading-primary {
        .hook-inverse-heading-primary;
    }

    .ui-heading-hero {
        .hook-inverse-heading-hero;
    }

    .ui-heading-divider {
        border-bottom-color: @inverse-heading-divider-border;
        .hook-inverse-heading-divider;
    }

    .ui-heading-bullet::before {
        border-left-color: @inverse-heading-bullet-border;
        .hook-inverse-heading-bullet;
    }

    .ui-heading-line > ::before,
    .ui-heading-line > ::after {
        border-bottom-color: @inverse-heading-line-border;
        .hook-inverse-heading-line;
    }

}

.hook-inverse-heading-primary() {}
.hook-inverse-heading-hero() {}
.hook-inverse-heading-divider() {}
.hook-inverse-heading-bullet() {}
.hook-inverse-heading-line() {}