/* GLOBALS */
:root,
[data-bs-core=elegant][data-bs-theme=dark] {
    --image-hover-zoom-transition: all 0.3s linear;
    --image-hover-zoom-transform: scale(1.1);
    --bs-heading-color: #f4e2c9;
    --bs-primary: #f4e2c9;
}

.navbar {
    background: rgba(43, 41, 39, 0.82);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ROUTINE */
.routine-card {
    cursor: pointer;
}

.bg-image-routine {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    @media (max-width: 767.98px) {
        background: var(--bs-content-bg) !important;
    }
}

/* TIMER */
.timer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timer-ring {
    position: relative;
    width: 140px;
    height: 140px;
    zoom: 2.3;

    @media (max-width: 767.98px) {
        zoom: 1.5;
    }

    @media (max-width: 520px) {
        zoom: 1;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}

.timer-ring svg {
    transform: rotate(-90deg);
    position: absolute;
    z-index: 9;

    @media (max-width: 520px) {
        width: 100%;
        height: 100%;
    }
}

.timer-ring circle {
    fill: none;
    stroke-width: 10;
}

.timer-bg {
    stroke: var(--bs-content-border-color);
}

.timer-fill {
    stroke: #f4e2c9;
    stroke-linecap: round;
    transition: stroke-dashoffset .9s linear;
}

.timer-workout-img {
    width: 140px;
    position: absolute;
    border-radius: 100%;
    padding: 9px;

    @media (max-width: 520px) {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 8%;
    }
}

/* WORKOUT */
.workout-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 5rem;
}

.progress-bar {
    height: 4px;
    background: var(--bs-content-border-color);
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.progress-fill {
    height: 100%;
    background: #f4e2c9;
    border-radius: 100px;
    transition: width .5s ease;
}

.rotate-exercise {
    z-index: 9;
    background: #514c49;
    zoom: 0.6;
    top: calc(100% + -7px);
}

.exercise-info {
    cursor: pointer;
}

/* DETAILS */
.detail-workout-img {
    @media (max-width: 520px) {
        max-width: 80px;
    }
}

/* HELPER */
.filter-primary {
    filter: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(512%) hue-rotate(335deg) brightness(104%) contrast(89%);
}

.filter-secondary {
    filter: brightness(0) saturate(100%) invert(97%) sepia(8%) saturate(1167%) hue-rotate(320deg) brightness(99%) contrast(92%);
}

.filter-warning {
    filter: brightness(0) saturate(100%) invert(63%) sepia(33%) saturate(4103%) hue-rotate(326deg) brightness(99%) contrast(98%);
}

.hover-zoom {
    overflow: hidden;

    img, video {
        transition: var(--image-hover-zoom-transition)
    }

    &:hover {
        img, video {
            transform: var(--image-hover-zoom-transform)
        }
    }
}