/*!************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/@wordpress/scripts/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/@wordpress/scripts/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/a2cp/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */
/* Expands the main block editor */
.a2cp-block {
  width: 100%;
}

.a2cp-block-placeholder .components-placeholder__fieldset {
  max-width: 100%;
}

/* Makes the displayable options container pop out */
.trs-display-controls {
  border: 1px solid lightgray;
  box-shadow: 0px 4px 10px gray;
  margin-right: auto;
  margin-left: auto;
  width: -moz-fit-content;
  width: fit-content;
  width: -webkit-fit-content;
}

/* Flex list display */
.trs-options-wrapper {
  display: flex;
  justify-content: space-evenly;
}

/* Container for a2cp displayable options */
.trs-wrapper {
  padding: 4px;
  position: relative;
  flex-grow: 1;
  text-align: center;
}

/* partial border for displayable options container */
.trs-wrapper:before {
  position: absolute;
  content: "";
  top: 10%;
  bottom: 20%;
  left: 0;
  border-left: 1px solid lightgray;
}

/* ensures border does not appear for displayable option container that is last child */
.trs-wrapper:last-child:before {
  content: "";
  border: none;
}

/* Give the content some props, make whole area clickable */
.trs-inner-wrapper {
  display: inline-block;
  padding: 4px;
  height: 100%;
}

/* Ensures the container is not too big */
.trs-toggle-container p.trs-toggle-label {
  margin-top: 0;
  margin-bottom: 0;
}

/* Centers the toggle */
.trs-toggle div span {
  right: calc(50% - 18px);
}

.components-panel__row .trs-toggle-container {
  float: left;
}

.components-panel__row .edit-component.btn-cmp {
  float: right;
}

.components-panel__row .edit-component.trs-toggle-label {
  font-size: 10px;
  color: gray;
}

label.content-element {
  align-self: start;
}

.input-text.qty {
  width: 5em;
}

input.button-text {
  width: 8em;
}

.disabled-item {
  color: grey;
}

.disabled-item input.button-text, .disabled-item .edit-component.btn-cmp {
  display: none;
}

.edit-component {
  width: -moz-max-content;
  width: max-content;
  text-align: center;
  text-align: -webkit-center;
  margin: auto;
}

.edit-component.input-area {
  text-align: center;
  text-align: -webkit-center;
  margin: auto;
}

.edit-component.input-area input {
  display: block;
}

.edit-component p.display-edit-title {
  font-size: 12px;
  margin: 0 0;
  color: gray;
}

.edit-component p.edit-component {
  display: flex;
  justify-content: space-between;
  margin: 0 0;
  font-size: 10px;
  color: gray;
}

span.preview-text:first-child {
  margin-left: 4px;
}

.components-base-control.trs-radio-cmp {
  font-size: 10px;
  color: gray;
  text-align: right;
}

.components-base-control.trs-radio-cmp.components-radio-control {
  margin-bottom: 0;
}

.ea-separator::before {
  content: " - ";
}

.slider-enter {
  opacity: 0;
  transform: translate3d(-25vw, 0, 0);
}

.slider-enter-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 500ms ease-in, opacity 500ms ease-in;
}

.slider-enter-done {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.slider-exit {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.slider-exit-active {
  opacity: 0;
  transform: translate3d(-25vw, 0, 0);
  transition: transform 500ms ease-in, opacity 500ms ease-in;
}

.slider-exit-done {
  opacity: 0;
  transform: translate3d(-25vw, 0, 0);
}

.slider-container {
  position: absolute;
  text-align: center;
  min-height: 17em;
  background-color: #f1f1f1;
  width: 100%;
}

.slider-group {
  position: relative;
}

.slider-placeholder {
  min-height: 17em;
}

.is-back-button {
  background-color: #eee;
}
