.button_wrapper {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* flex: 1; */
  &.active {
    .button_ellipse {
      display: grid;
      place-content: center;
      width: 40px;
      height: 40px;
      background: #e44672;
      box-shadow: 3px 3px 12px #dddddd, inset -6px -6px 6px #d52f5d,
        inset 6px 6px 6px #f5b2c5;
      border-radius: 100%;
    }
    .button_label {
      font-family: "Roboto";
      font-style: normal;
      font-weight: 500;
      font-size: 12px;
      line-height: 13px;
      text-align: center;
      color: #e44672;
      margin-top: 0.25rem;
      text-transform: capitalize;
    }
    
  }
  &.inactive {
    .button_ellipse {
      width: 39.17px;
      height: 39.17px;
      display: grid;
      place-content: center;
      background: #f1f1f1;
      box-shadow: 3px 3px 12px #dddddd, inset -6px -6px 6px #e3e3e3,
        inset 6px 6px 6px #ffffff;
      border-radius: 100%;

      svg {
        g {
          path {
            fill: black;
          }
        }
      }
      
    }
    .button_label {
        font-family: "Roboto";
        font-style: normal;
        font-weight: 500;
        font-size: 0.625rem;
        line-height: 13px;
        text-align: center;
        color: #000;
        margin-top: 0.25rem;
        text-transform: capitalize;
        
      }
  }
}