button.secondary,
button.primary,
button.tertiary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 101;
  cursor: pointer;
  border: none;
  border-radius: 16px;
  outline: none;
  padding: 16px 32px;
}

button.secondary:not(:disabled):hover,
button.primary:not(:disabled):hover,
button.tertiary:not(:disabled):hover,
.square-button:not(:disabled):hover {
  filter: drop-shadow(var(--button-shadow));
}

button.secondary.small,
button.primary.small,
button.tertiary.small {
  padding: 10px 16px;
}

button.primary {
  background-color: var(--blue);
  color: var(--white);
}

button.primary:disabled {
  background-color: var(--grey-03);
}

button.secondary {
  background-color: var(--light);
  color: var(--blue);
}

button.secondary:disabled {
  background-color: var(--grey-01);
  color: var(--grey-04);
}

button.tertiary {
  background-color: transparent;
  color: var(--blue);
}

.square-button {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #08bfa1;
  color: white;
  height: 40px;
  width: 40px;
  border-radius: 6px;
  cursor: pointer;
}

.square-button:disabled,
button:disabled {
  cursor: default;
}

.buttons-container {
  display: flex;
  gap: 5px;
}

.buttons-container.column {
  flex-direction: column;
}

.text-button, .icon-button {
  cursor: pointer;
}

.icon-button:hover {
  filter: drop-shadow(var(--icon-shadow));
}

.text-button:hover {
  text-shadow: var(--icon-shadow);
}

button.tertiary.arrow::after {
    content: '';
    background-image: url("/Public/NewImages/tertiary-arrow.svg");
    background-repeat: no-repeat;
    width: 50px;
    height: 15px;
    margin-left: 16px;
}