/* Block specific CSS */
.ql-button,
.acf-block-preview .ql-button {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #EB5939;
  border: 1px solid #EB5939;
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-stretch: semi-condensed;
  letter-spacing: 1px;
  line-height: 1.625;
  padding: 6px 22px;
  margin-bottom: 24px;
  margin-top: 6px;
  width: max-content;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  text-transform: uppercase;
}

.ql-button:hover,
.ql-button:focus,
.acf-block-preview .ql-button:hover {
  background-color: transparent;
  border: 1px solid #E33C16;
  color: #E33C16;
}

.ql-button.button-align-middle {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

.ql-button.button-align-right {
  margin-left: auto;
  display: table;
}

.ql-button.button-block-el {
  display: block;
  width: max-content;
}

/* Focus states for accessiblity */
body:not(.user-is-tabbing) .ql-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(235, 89, 57, 0.3);
}
body:not(.user-is-tabbing) .ql-button.button-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(64, 91, 67, 0.3);
}
body:not(.user-is-tabbing) .bg-dark .ql-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(37, 43, 55, 0.3);
}


/* Button colour variations
--------------------------------------------- */
/* ---- White ---- */
.ql-button.button-white,
.acf-block-preview .ql-button.button-white {
  background-color: #FFF;
  border: 1px solid #FFF;
  color: #2C3341;
  box-shadow: 0px 0px 16px 0px rgba(6, 43, 84, 0.2);
}
.ql-button.button-white:hover,
.ql-button.button-white:focus,
.acf-block-preview .ql-button.button-white:hover,
.acf-block-preview .ql-button.button-white:focus {
  background-color: transparent;
  border: 1px solid #FFF;
  color: #2C3341;
}

/* ---- Primary ---- */
.ql-button.button-primary,
.acf-block-preview .ql-button.button-primary {
  background-color: #405B43;
  border: 1px solid #405B43;
  color: #FFF;
}
.ql-button.button-primary:hover,
.ql-button.button-primary:focus,
.acf-block-preview .ql-button.button-primary:hover,
.acf-block-preview .ql-button.button-primary:focus {
  background-color: transparent;
  border: 1px solid #364D39;
  color: #364D39;
}

/* ---- Black ---- */
.ql-button.button-black,
.acf-block-preview .ql-button.button-black {
  background-color: #2C3341;
  border: 1px solid #2C3341;
  color: #FFF;
}
.ql-button.button-black:hover,
.ql-button.button-black:focus,
.acf-block-preview .ql-button.button-black:hover,
.acf-block-preview .ql-button.button-black:focus {
  background-color: transparent;
  border: 1px solid #252B37;
  color: #252B37;
}

.bg-dark .ql-button:hover,
.bg-dark .ql-button.button-primary:focus,
.bg-dark .ql-button.button-primary:hover {
  color: #FFF;
}


/* Button outlined */
/* ---- Outlined : Secondary ---- */
.ql-button.button-outlined,
.acf-block-preview .ql-button.button-outlined {
  background-color: transparent;
  border: 1px solid #EB5939;
  color: #EB5939;
  box-shadow: none;
}
.ql-button.button-outlined:hover,
.ql-button.button-outlined:focus,
.acf-block-preview .ql-button.button-outlined:hover,
.acf-block-preview .ql-button.button-outlined:focus {
  background-color: #EB5939;
  color: #FFF;
}

/* ---- Outlined : Primary ---- */
.ql-button.button-primary.button-outlined,
.acf-block-preview .ql-button.button-primary.button-outlined {
  background-color: transparent;
  border: 1px solid #405B43;
  color: #405B43;
}
.ql-button.button-primary.button-outlined:hover,
.ql-button.button-primary.button-outlined:focus,
.acf-block-preview .ql-button.button-primary.button-outlined:hover,
.acf-block-preview .ql-button.button-primary.button-outlined:focus {
  background-color: #405B43;
  border: 1px solid #405B43;
  color: #FFF;
}

/* ---- Outlined : White ---- */
.ql-button.button-secondary.button-outlined,
.acf-block-preview .ql-button.button-secondary.button-outlined {
  background-color: transparent;
  border: 1px solid #FFF;
  color: #FFF;
}
.ql-button.button-secondary.button-outlined:hover,
.ql-button.button-secondary.button-outlined:focus,
.acf-block-preview .ql-button.button-secondary.button-outlined:hover,
.acf-block-preview .ql-button.button-secondary.button-outlined:focus {
  background-color: #FFF;
  border: 1px solid #FFF;
  color: #2C3341;
}

/* ---- Outlined : Black ---- */
.ql-button.button-black.button-outlined,
.acf-block-preview .ql-button.button-black.button-outlined {
  background-color: transparent;
  border: 1px solid #252B37;
  color: #252B37;
}
.ql-button.button-black.button-outlined:hover,
.ql-button.button-black.button-outlined:focus,
.acf-block-preview .ql-button.button-black.button-outlined:hover,
.acf-block-preview .ql-button.button-black.button-outlined:focus {
  background-color: #252B37;
  border: 1px solid #252B37;
  color: #FFF;
}

/* Editor view
--------------------------------------------- */
.acf-block-preview .ql-button {
  pointer-events: none;
  margin-top: 0;
}

.block-editor__container .editor-styles-wrapper .ql-button:not(.button-white):not(.button-outlined) {
  color: #fff;
}

.block-editor-block-list__block[data-title="Button"] {
  margin-top: 6px;
  margin-bottom: 0;
}