{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "column",
    "align-items": "center",
    "position": "relative"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "align-items": "center",
        "background-color": "#7a9b8e",
        "border": "3px solid #000",
        "border-radius": "15px",
        "width": "60px",
        "box-shadow": "0 4px 6px rgba(0,0,0,0.3)",
        "position": "relative"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "align-items": "center",
            "margin": "8px 0",
            "position": "relative",
            "width": "100%"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "left": "-26px",
                "width": "0",
                "height": "0",
                "border-top": "15px solid transparent",
                "border-bottom": "15px solid transparent",
                "border-right": "25px solid #8B6914",
                "z-index": "0"
              }
            },
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "right": "-26px",
                "width": "0",
                "height": "0",
                "border-top": "15px solid transparent",
                "border-bottom": "15px solid transparent",
                "border-left": "25px solid #8B6914",
                "z-index": "0"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "35px",
                "height": "35px",
                "border-radius": "50%",
                "background-color": "=if(@currentField == 'Red', '#FF3333', '#555')",
                "border": "3px solid #000",
                "box-shadow": "=if(@currentField == 'Red', 'inset 0 -3px 6px rgba(0,0,0,0.3), 0 0 15px rgba(255,51,51,0.9)', 'inset 0 3px 6px rgba(0,0,0,0.6)')",
                "z-index": "1",
                "margin": "0 auto"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "align-items": "center",
            "margin": "8px 0",
            "position": "relative",
            "width": "100%"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "left": "-26px",
                "width": "0",
                "height": "0",
                "border-top": "15px solid transparent",
                "border-bottom": "15px solid transparent",
                "border-right": "25px solid #8B6914",
                "z-index": "0"
              }
            },
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "right": "-26px",
                "width": "0",
                "height": "0",
                "border-top": "15px solid transparent",
                "border-bottom": "15px solid transparent",
                "border-left": "25px solid #8B6914",
                "z-index": "0"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "35px",
                "height": "35px",
                "border-radius": "50%",
                "background-color": "=if(@currentField == 'Yellow', '#FFD700', '#555')",
                "border": "3px solid #000",
                "box-shadow": "=if(@currentField == 'Yellow', 'inset 0 -3px 6px rgba(0,0,0,0.3), 0 0 15px rgba(255,215,0,0.9)', 'inset 0 3px 6px rgba(0,0,0,0.6)')",
                "z-index": "1",
                "margin": "0 auto"
              }
            }
          ]
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "align-items": "center",
            "margin": "8px 0",
            "position": "relative",
            "width": "100%"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "left": "-26px",
                "width": "0",
                "height": "0",
                "border-top": "15px solid transparent",
                "border-bottom": "15px solid transparent",
                "border-right": "25px solid #8B6914",
                "z-index": "0"
              }
            },
            {
              "elmType": "div",
              "style": {
                "position": "absolute",
                "right": "-26px",
                "width": "0",
                "height": "0",
                "border-top": "15px solid transparent",
                "border-bottom": "15px solid transparent",
                "border-left": "25px solid #8B6914",
                "z-index": "0"
              }
            },
            {
              "elmType": "div",
              "style": {
                "width": "35px",
                "height": "35px",
                "border-radius": "50%",
                "background-color": "=if(@currentField == 'Green', '#4CAF50', '#555')",
                "border": "3px solid #000",
                "box-shadow": "=if(@currentField == 'Green', 'inset 0 -3px 6px rgba(0,0,0,0.3), 0 0 15px rgba(76,175,80,0.9)', 'inset 0 3px 6px rgba(0,0,0,0.6)')",
                "z-index": "1",
                "margin": "0 auto"
              }
            }
          ]
        }
      ]
    },
    {
      "elmType": "div",
      "style": {
        "width": "20px",
        "height": "30px",
        "background-color": "#888",
        "border": "2px solid #000",
        "border-top": "none",
        "margin-top": "-3px"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "35px",
        "height": "12px",
        "background-color": "#999",
        "border": "2px solid #000",
        "border-radius": "3px 3px 0 0"
      }
    },
    {
      "elmType": "div",
      "style": {
        "width": "80px",
        "height": "3px",
        "background-color": "#000",
        "margin-top": "0"
      }
    }
  ]
}