.pin[data-color="primary"] {
    color: #fff;
}

.pin[data-color="primary"]::after, .pin[data-color="primary"] > div {
    background: #093073;
}

.pin[data-color="secondary"]::after, .pin[data-color="secondary"] > div {
    background: #C1CBDC;
}

.pin[data-color="action"] {
    color: #fff;
}

.pin[data-color="action"]::after, .pin[data-color="action"] > div {
    background-color: #97c11f;
}

.pin[data-color="red"] {
    color: #fff;
}

.pin[data-color="red"]::after, .pin[data-color="red"] > div {
    background-color: red;
}

.pin[data-color="yellow"]::after, .pin[data-color="yellow"] > div {
    background-color: yellow;
}

.pin[data-color="green"] {
    color: #fff;
}

.pin[data-color="green"]::after, .pin[data-color="green"] > div {
    background-color: green;
}