/* ===========================
   WIND WIDGET
   =========================== */

.wg-site {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    aspect-ratio: 1 / 1;
}

/* SVG scales responsively */
.wg-compass-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Rings, labels, dots */
.wg-ring {
    stroke: #555;
    stroke-width: 1;
    fill: none;
}

.wg-cardinal-line {
    stroke: #555;
    stroke-width: 2;
}

.wg-cardinal-label {
    fill: #555;
    font-family: sans-serif;
    font-size: 18px;
}

.wg-dot {
    fill: #555;
}

/* Donut fill */
.wg-background-fill {
    fill: #e6e6e6;
}

/* Arcs */
.wg-arc {
    transition: opacity 0.25s ease-out;
}

.wg-arc-marginal-ccw,
.wg-arc-marginal-cw {
    stroke: #ffeb3b;
    stroke-width: 10;
    fill: none;
    stroke-linecap: butt; /* square ends */
}

.wg-arc-flyable {
    stroke: #00c853;
    stroke-width: 10;
    fill: none;
    stroke-linecap: butt; /* square ends */
}

/* Arrow */
.wg-wind-arrow {
    transition: transform 0.25s ease-out;
}

.wg-arrow-fill {
    fill: #444;
    transition: fill 0.25s ease-out;
}

.wg-arrow-outline {
    stroke: #444;
    transition: stroke 0.25s ease-out;
    fill: none;
}

.wg-arrow-axis {
    stroke: #444;
}

/* Numeric readout inside SVG */
.wg-degree-readout-svg,
.wg-windspeed-readout-svg {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    fill: #444;
    pointer-events: none;
    font-size: 22px;
}