/*********** Buttons *********/
main .btn a,
.editor-styles-wrapper .btn a {
  display: inline-block;
  background-color: var(--tw-color-primary);
  border: 3px solid var(--tw-color-primary);
  color: white;
  font-weight: 500;
  padding: 14px 18px;
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 250ms;
  text-decoration: none;
}

main .btn:hover a,
.editor-styles-wrapper .btn:hover a {
  /* box-shadow: 0 0px 8px #888; */
  background-color: var(--tw-color-primary-lighter);
  border: 3px solid var(--tw-color-primary-lighter);
}

main .btn:active a,
.editor-styles-wrapper .btn:active a {
  background-color: var(--tw-color-primary-darker);
}

main .btn a,
.editor-styles-wrapper .btn a {
  color: white;
  text-decoration: none;
}

/******** white ********/
main .btn-white a {
  background-color: white;
  border: 3px solid white;
  color: var(--tw-color-primary);
}

main .btn-white:hover a,
.editor-styles-wrapper .btn-white:hover a {
  /* box-shadow: 0 0px 8px #888; */
  background-color: white;
  border: 3px solid white;
}

main .btn-white a {
  color: var(--tw-color-primary);
}

/******** outline buttons *********/

main .btn-outline a,
.editor-styles-wrapper .btn-outline a {
  display: inline-block;
  background-color: transparent;
  color: var(--tw-color-primary);
}

main .btn-outline:hover a,
.editor-styles-wrapper .btn-outline:hover a {
  /* box-shadow: 0 0px 8px #888; */
  background-color: var(--tw-color-primary-lightest);
}

main .btn-outline:active a,
.editor-styles-wrapper .btn-outline:active a {
  background-color: var(--tw-color-primary-lighter);
}

main .btn-outline a,
.editor-styles-wrapper .btn-outline a {
  color: var(--tw-color-primary);
}