@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@1..144,1..1000&display=swap');

@property --chip-primary {
    syntax: '<color>';
    inherits: false;
    initial-value: #ff0000;
}

@property --chip-accent {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

.chip {
    width: 50px;
    height: 50px;

    background-color: var(--chip-primary);

    border-radius: 100%;

    border: dashed 5px var(--chip-accent);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--chip-accent);
    font-size: 20px;
    font-weight: bold;
    font-family: "Google Sans Flex", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}