// Name:            Countdown
// Description:     Component to create countdown timers
//
// Component:       `ui-countdown`
//
// Sub-objects:     `ui-countdown-number`
//                  `ui-countdown-separator`
//                  `ui-countdown-label`
//
// ========================================================================


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

@countdown-item-line-height:                    70px;

@countdown-number-font-size:                    2rem; // 32px
@countdown-number-font-size-s:                  4rem; // 64px
@countdown-number-font-size-m:                  6rem; // 96px

@countdown-separator-font-size:                 1rem; // 16px
@countdown-separator-font-size-s:               2rem; // 32px
@countdown-separator-font-size-m:               3rem; // 48px


/* ========================================================================
   Component: Countdown
 ========================================================================== */

.ui-countdown {
    .hook-countdown;
}


/* Item
 ========================================================================== */

/*
 * 1. Center numbers and separators vertically
 */

.ui-countdown-number,
.ui-countdown-separator {
    /* 1 */
    line-height: @countdown-item-line-height;
    .hook-countdown-item;
}


/* Number
 ========================================================================== */

.ui-countdown-number {
    font-size: @countdown-number-font-size;
    .hook-countdown-number;
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .ui-countdown-number { font-size: @countdown-number-font-size-s; }

}

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

    .ui-countdown-number { font-size: @countdown-number-font-size-m; }

}


/* Separator
 ========================================================================== */

.ui-countdown-separator {
    font-size: @countdown-separator-font-size;
    .hook-countdown-separator;
}

/* Phone landscape and bigger */
@media (min-width: @breakpoint-small) {

    .ui-countdown-separator { font-size: @countdown-separator-font-size-s; }

}

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

    .ui-countdown-separator { font-size: @countdown-separator-font-size-m; }

}


/* Label
 ========================================================================== */

.ui-countdown-label {
    .hook-countdown-label;
}


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

.hook-countdown-misc;

.hook-countdown() {}
.hook-countdown-item() {}
.hook-countdown-number() {}
.hook-countdown-separator() {}
.hook-countdown-label() {}
.hook-countdown-misc() {}


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

.hook-inverse() {

    .ui-countdown-number,
    .ui-countdown-separator {
        .hook-inverse-countdown-item;
    }

    .ui-countdown-number {
        .hook-inverse-countdown-number;
    }

    .ui-countdown-separator {
        .hook-inverse-countdown-separator;
    }

    .ui-countdown-label {
        .hook-inverse-countdown-label;
    }

}

.hook-inverse-countdown-item() {}
.hook-inverse-countdown-number() {}
.hook-inverse-countdown-separator() {}
.hook-inverse-countdown-label() {}