/* solid_btn */
.cmn_button {
  padding-block: 16px;
  padding-inline: 40px;
  color: var(--text_clr_white);
  min-height: 50px;
  background: var(--bg_primary_01);
  position: relative;
  width: fit-content;
  font-weight: 600;
  transition: 0.5s ease-in-out;
  display: inline-flex;
}
.cmn_button::after,.cmn_button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  border: 1px solid var(--clr_primary_01);
  /* z-index: -1; */
  transition: 0.5s ease-in-out;
}
.cmn_button::before {
  border-inline: 0;
  height: 100%;
}
.cmn_button::after{
  border-block: 0;
  width: 100%;
}
.cmn_button.dark_green{
  background: var(--bg_primary_01);
}
.cmn_button.dark_green::after,.cmn_button.dark_green::before {
  border-color: var(--border_clr_03);
}
.cmn_button:hover {
  background: var(--bg_secondary) ;
}
.cmn_button:hover::after,
.cmn_button:hover::before {
  border-color: var(--bg_secondary) ;
}
.cmn_button.purple{
  background: var(--bg_secondary);
}
.cmn_button.purple::after,
.cmn_button.purple::before {
  border-color: var(--bg_secondary) ;
}
.cmn_button.purple:hover{
  background: var(--bg_primary_01);
}
.cmn_button.purple:hover::after,
.cmn_button.purple:hover::before {
  border-color: var(--bg_primary_01) ;
}