/* -------------------------------------------
    Countdown
        1. Base Style
        2. Countdown Container
        3. Countdown Section
        4. Countdown Amount
        5. Countdown Period

---------------------------------------------- */

@import '../../../assets/sass/config';
@import '../../assets/sass/mixins/direction';
@import '../../assets/sass/mixins/mixins';

// 1. Base Style
.countdown {
    --alpus-countdown-section-gap: 2rem;

    &.outer-period {
        .countdown-period {
            left: 0;
            right: 0;
            top: 100%;
            bottom: auto;
            text-align: center;
        }
    }
    &.no-split {
        .countdown-section::after {
            content: none;
        }
    }
}

// 2. Countdown Container
.countdown-container {
    display: flex;
    align-items: center;
    &.inline-type {
        .countdown-amount {
            font-size: inherit;
        }
    }
    .countdown-label {
        margin-#{$right}: 1rem;
    }
}

// 3. Countdown Section
.countdown-section {
    display: inline-block;
    position: relative;
    padding: 2rem 1rem;

    &:not(:last-child) {
        margin-#{$right}: var(--alpus-countdown-section-gap);

        &::after {
            content: ':';
            display: inline-block;
            position: absolute;
            #{$left}: 100%;
            top: 50%;
            margin-#{$left}: calc( var(--alpus-countdown-section-gap) / 2 - 2px );
            margin-top: -1px;
            border-color: transparent !important;
            color: var(--alpus-change-color-dark-1);
            font-size: 2rem;
            line-height: 1;
            transform: translateY(-50%);
        }
    }

    span {
        display: block;
        white-space: nowrap;
        text-align: center;
    }
}

// 4. Countdown Amount
.countdown-amount {
    color: var(--alpus-primary-color);
    font-size: 3rem;
}

// 5. Countdown Period
.countdown-period {
    position: absolute;
    #{$left}: 0;
    bottom: 1rem;
    width: 100%;
    padding-left: .2rem;
    padding-right: .2rem;
    color: var(--alpus-change-color-dark-1);
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: lowercase;
}