@import 'colors';
@import 'mixins';

.progressBox {
    height: .6rem;
    width: 100%;
    border-radius: 5rem;
    background: #e9e9e9;
    cursor: pointer;

    .progress-bar {
        height: inherit;
        width: 0%;
        position: relative;
        border-radius: inherit;
        background: linear-gradient(90deg, $yellow 0%, $orange 100%);

        &::before {
            content: '';
            position: absolute;
            height: 1.2rem;
            width: 1.2rem;
            border-radius: inherit;
            top: 50%;
            right: -.5rem;
            transform: translateY(-50%);
            background: $orange;
            pointer-events: none;
            z-index: 2;
            opacity: 0;
            transition: opacity .2s ease;
        }
    }

    &:hover .progress-bar::before {
        opacity: 1;
    }

    .timer {
        @include flexCenter;
        margin-top: .5rem;

        span {
            font-size: 1.3rem;
            font-weight: 500;
            color: $lightblack;
        }
    }
}