/*
This is the left-top dot icon css (shared by mforblue / beach / setuptools,
which all use the same cat shape and just recolor it via --dot-color-a/-b
in themes.css). Padres and xmas use their own motif file instead - see
dot/padres_dot.css, dot/xmas_tree_dot.css, dot/xmas_santa_dot.css.
You can create your own dot icon css here:
https://bcrikko.github.io/css-collection/tool/dotgen/index.html
*/

.dot-cat::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;

    width: 4px;
    height: 4px;
    background: transparent;

    box-shadow: 4px 4px 0 transparent,
        8px 4px 0 transparent,
        12px 4px 0 transparent,
        16px 4px 0 transparent,
        20px 4px 0 transparent,
        24px 4px 0 transparent,
        28px 4px 0 transparent,
        32px 4px 0 transparent,
        36px 4px 0 transparent,
        40px 4px 0 transparent,
        4px 8px 0 transparent,
        8px 8px 0 transparent,
        12px 8px 0 transparent,
        16px 8px 0 transparent,
        20px 8px 0 var(--dot-color-a),
        24px 8px 0 transparent,
        28px 8px 0 transparent,
        32px 8px 0 transparent,
        36px 8px 0 var(--dot-color-a),
        40px 8px 0 transparent,
        4px 12px 0 transparent,
        8px 12px 0 transparent,
        12px 12px 0 transparent,
        16px 12px 0 var(--dot-color-a),
        20px 12px 0 var(--dot-color-a),
        24px 12px 0 var(--dot-color-a),
        28px 12px 0 var(--dot-color-a),
        32px 12px 0 var(--dot-color-a),
        36px 12px 0 var(--dot-color-a),
        40px 12px 0 var(--dot-color-a),
        4px 16px 0 var(--dot-color-a),
        8px 16px 0 transparent,
        12px 16px 0 transparent,
        16px 16px 0 var(--dot-color-a),
        20px 16px 0 var(--dot-color-b),
        24px 16px 0 var(--dot-color-b),
        28px 16px 0 var(--dot-color-a),
        32px 16px 0 var(--dot-color-b),
        36px 16px 0 var(--dot-color-b),
        40px 16px 0 var(--dot-color-a),
        4px 20px 0 var(--dot-color-a),
        8px 20px 0 var(--dot-color-a),
        12px 20px 0 transparent,
        16px 20px 0 var(--dot-color-a),
        20px 20px 0 var(--dot-color-b),
        24px 20px 0 var(--dot-color-a),
        28px 20px 0 var(--dot-color-a),
        32px 20px 0 var(--dot-color-b),
        36px 20px 0 var(--dot-color-a),
        40px 20px 0 var(--dot-color-a),
        4px 24px 0 transparent,
        8px 24px 0 var(--dot-color-a),
        12px 24px 0 transparent,
        16px 24px 0 var(--dot-color-a),
        20px 24px 0 var(--dot-color-b),
        24px 24px 0 var(--dot-color-b),
        28px 24px 0 var(--dot-color-a),
        32px 24px 0 var(--dot-color-b),
        36px 24px 0 var(--dot-color-b),
        40px 24px 0 var(--dot-color-a),
        4px 28px 0 transparent,
        8px 28px 0 var(--dot-color-a),
        12px 28px 0 transparent,
        16px 28px 0 var(--dot-color-a),
        20px 28px 0 var(--dot-color-a),
        24px 28px 0 var(--dot-color-a),
        28px 28px 0 var(--dot-color-a),
        32px 28px 0 var(--dot-color-a),
        36px 28px 0 var(--dot-color-a),
        40px 28px 0 var(--dot-color-a),
        4px 32px 0 transparent,
        8px 32px 0 transparent,
        12px 32px 0 var(--dot-color-a),
        16px 32px 0 var(--dot-color-a),
        20px 32px 0 var(--dot-color-a),
        24px 32px 0 var(--dot-color-a),
        28px 32px 0 var(--dot-color-a),
        32px 32px 0 var(--dot-color-a),
        36px 32px 0 var(--dot-color-a),
        40px 32px 0 transparent,
        4px 36px 0 transparent,
        8px 36px 0 transparent,
        12px 36px 0 var(--dot-color-a),
        16px 36px 0 transparent,
        20px 36px 0 var(--dot-color-a),
        24px 36px 0 transparent,
        28px 36px 0 var(--dot-color-a),
        32px 36px 0 transparent,
        36px 36px 0 var(--dot-color-a),
        40px 36px 0 transparent,
        4px 40px 0 transparent,
        8px 40px 0 transparent,
        12px 40px 0 var(--dot-color-a),
        16px 40px 0 transparent,
        20px 40px 0 var(--dot-color-a),
        24px 40px 0 transparent,
        28px 40px 0 var(--dot-color-a),
        32px 40px 0 transparent,
        36px 40px 0 var(--dot-color-a),
        40px 40px 0 transparent;
}