.btn-3d {
  border-radius: 5px;
  color: var(--theme-color-4);
  background-color: white;
  outline: var(--theme-color-4) 1px solid;
  letter-spacing: 1.5px;
  padding: 10px 20px;
  margin: 0;
  border: none;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  text-transform: uppercase;
}

.btn-3d.warning {
  color: var(--fg-color-warning);
  background-color: var(--bkg-color-warning);
}

.btn-3d.warning:not(:disabled):hover {
  color: var(--fg-color-warning-secondary);
  background-color: var(--bkg-color-warning-secondary);
}

.btn-3d.danger {
  color: var(--fg-color-danger);
  background-color: var(--bkg-color-danger);
}

.btn-3d.danger:not(:disabled):hover {
  color: var(--fg-color-danger-secondary);
  background-color: var(--bkg-color-danger-secondary);
}

.btn-3d:focus:not(:focus-visible) {
  outline: 1px solid;
}

.btn-3d.second, .btn-3d.third {
  outline: none;
  border-radius: 5px;
  letter-spacing: 1.5px;
  font-weight: 300;
  text-transform: uppercase;
}

.btn-3d.third {
  background-color: var(--theme-color-1);
  color: white;
}

.btn-3d.second, .btn-3d:not(:disabled):hover {
  background-color: var(--theme-color-4);
  color: white;
  text-decoration: none;
}
.btn-3d.second:not(:disabled):hover {
  background-color: var(--theme-color-1);
  color: white;
  text-decoration: none;
}

.btn-3d.third:not(:disabled):hover {
  color: white;
  background-color: var(--theme-color-4);
  outline: 1px solid white;
}

.btn-3d.third.third-active {
  color: var(--theme-color-1);
  background-color: white;
  outline: 1px solid var(--theme-color-1);
}

.icon-svg {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  justify-content: center;

}

.btn-3d > .icon-svg {
  stroke: var(--theme-color-4);
  fill: var(--theme-color-4);
}

.btn-3d:not(:disabled):hover > .icon-svg {
	stroke: white;
	fill: white;
}

.btn-3d.secondary > .icon-svg,
.btn-3d.third > .icon-svg {
  stroke: white;
  fill: white;
}

.btn-3d.secondary:not(:disabled):hover > .icon-svg {
	stroke: var(--theme-color-4);
	fill: var(--theme-color-4);
}

.btn-3d.third:not(:disabled):hover > .icon-svg {
	stroke: white;
	fill: white;
}

.btn-3d:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


@media (max-width: 768px) {

.btn-3d.second, .btn-3d:not(:disabled):hover {
  background-color: var(--theme-color-3);
}

.btn-3d:focus:not(:focus-visible) {
  outline: none; 
}

}