.ac-system-widget {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    color: white;
    box-sizing: border-box;
    container-type: size;
    container-name: ac-widget;
}

.ac-system-name {
    margin-right: auto;
    font-size: 1.25rem;
}

.ac-system-body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 85%;
    flex-direction: row;
    gap: clamp(10px, 3cqw, 40px);
}

.fan-wrapper,
.temp-wrapper {
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    width:46%;
}

.dial-control-group {
    width:100%;
    display: flex;
    height: 75%;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 2cqmin, 15px);
    margin-bottom: 5%;
}

.fan-dial,
.temp-dial {
    position: relative;
    width: min(40cqw, 60cqh);
    aspect-ratio: 1;
}

.dial-control-group > button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 10%;
    aspect-ratio: 1 / 1;
}

.dial-control-group > button img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dial-bg,
.dial-outline,
.dial-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dial-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(8px, 3vh, 36px);
    pointer-events: none;
    white-space: nowrap;
}

.dial-range {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    cursor: pointer;
}

.dial-title {
    font-size: 0.95rem;
}

.temp-mode-buttons {
    display: flex;
    flex-direction: row;
    gap: clamp(16px, 2cqmin, 15px);
    align-items: center;
    height: 20%;
    justify-content: center;
}

.temp-mode-buttons button,
.auto-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: min(8cqw, 15cqh);
    aspect-ratio: 1 / 1;
}

.temp-mode-buttons img,
.auto-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.widget-template.ac-system {
    width: 40vmin;
    height: 40vmin;
}

.template-panel .widget-template.ac-system {
    width: 50vmin;
    height: 40vmin;
}





/* === MEDIA === */

/* Mobile  */

@media (max-width: 699px) {
    .ac-system-name {
        font-size: 0.95rem;
    }

    .dial-title {
        font-size: 0.95rem;
    }

    .fan-wrapper, .temp-wrapper {
        height: auto;
        gap: 2rem;
    }
}

/* WVGA / WVGA-Narrow (720x480, 800x480) */

@media (min-width: 700px) and (max-width: 880px) {
}

/* WSVGA / XGA (1024x600, 1024x768) */

@media (min-width: 881px) and (max-width: 1150px) {
    .ac-system-name {
        font-size: 0.95rem;
    }

    .dial-title {
        font-size: 0.95rem;
    }
}

/* WXGA / HD720 / SXGA (1280x720/800/1024) */

@media (min-width: 1151px) and (max-width: 1600px) {
    .ac-system-name {
        font-size: 0.95rem;
    }

    .dial-title {
        font-size: 0.95rem;
    }
}

/* HD / WUXGA (1920x1080, 1920x1200) */

@media (min-width: 1601px) and (max-width: 2879px) {
    /* standard styles */
}

/* 4K (3840x2160) */

@media (min-width: 2880px) {

    .ac-system-name {
        font-size: 2rem;
    }

    .dial-title {
        font-size: 2rem;
    }
}