/* ---------------------------
    Settings
-------------------------- */
:root {
  --s-block-color-gray: #f9f9f9;
  --s-block-color-blue: rgba(24, 137, 193, 0.2);
  --s-block-color-green: rgba(0, 220, 58, 0.2);
  --s-block-color-red: rgba(255, 5, 5, 0.2);
  --s-block-color-yellow: rgba(255, 234, 0, 0.2);
  --s-border-color: #dddada;
  --s-border-color-selected: #0072aa;
  --s-spacing-small: 10px;
  --s-spacing-medium: 15px;
  --s-spacing-base: 15px;
  --s-spacing-large: 30px;
}

/* html :where(.editor-styles-wrapper) {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
} */

/* Fixes for theme.json */
.editor-styles-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* .block-editor-block-list__layout > :first-child {
  margin-top: 2rem;
} */
.block-editor-block-list__layout > * {
  margin-bottom: 2rem;
}

/* ---------------------------
    Fonts
-------------------------- */
.editor-writing-flow,
.editor-post-title__block .editor-post-title__input {
  /*font-family: 'font here';*/
}

.editor-post-title {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

/* ---------------------------
    Block
-------------------------- */
.block {
  background-color: var(--s-block-color-gray);
  outline: solid 1px var(--s-border-color);
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  will-change: backgound-color, box-shadow;
}

.wp-block.wp-block-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.block--color-blue {
  background-color: var(--s-block-color-blue);
}
.block--color-green {
  background-color: var(--s-block-color-green);
}
.block--color-red {
  background-color: var(--s-block-color-red);
}
.block--color-yellow {
  background-color: var(--s-block-color-yellow);
}

.block:hover {
  cursor: pointer;
}

.is-selected .block {
  outline: 3px solid var(--s-border-color-selected);
}

.block__header,
.block__body {
  text-align: left;
}

.block__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.block__header h3 {
  margin: 0 !important;
  font-weight: normal;
  line-height: 1;
  display: flex;
}

.block__meta {
  opacity: 0.5;
  margin-left: auto;
  padding-left: 10px;
}

.block__header h3 {
  margin: 0;
}

.block__body {
  display: none;
}

.block__body--is-open {
  display: block;
}

.block__content {
  font-size: 16px;
  border-top: 1px solid var(--s-border-color);
}

.block__content p {
  margin-top: 0;
}

.block__content p:last-child {
  margin: 0;
}

.block__content p {
  margin-top: 0 !important;
}

.block__content ul {
  margin: 0 !important;
  padding: 0 0 0 var(--s-spacing-large) !important;
}

/* ---------------------------
    Block - Small
-------------------------- */
.block--size-small {
  padding: var(--s-spacing-small);
}

.block--size-small .block__header h3 {
  font-size: 16px;
}

.block--size-small .block__header .dashicons {
  height: calc(var(--s-spacing-small) * 2);
  width: calc(var(--s-spacing-small) * 2);
  font-size: calc(var(--s-spacing-small) * 2);
  margin-right: var(--s-spacing-small);
}

.block--size-small .block__content {
  margin-top: var(--s-spacing-small);
  padding-top: var(--s-spacing-small);
}

/* ---------------------------
    Block - Medium
-------------------------- */
.block--size-medium {
  padding: var(--s-spacing-medium);
}

.block--size-medium .block__header h3 {
  font-size: 20px;
}

.block--size-medium .block__header .dashicons {
  height: calc(var(--s-spacing-medium) * 2);
  width: calc(var(--s-spacing-medium) * 2);
  font-size: calc(var(--s-spacing-medium) * 2);
  margin-right: var(--s-spacing-medium);
}

.block--size-medium .block__content {
  margin-top: var(--s-spacing-medium);
  padding-top: var(--s-spacing-medium);
}

/* ---------------------------
    Block - Large
-------------------------- */
.block--size-large {
  padding: var(--s-spacing-large);
}

.block--size-large .block__header h3 {
  font-size: 32px;
}

.block--size-large .block__header .dashicons {
  height: calc(var(--s-spacing-large) * 2);
  width: calc(var(--s-spacing-large) * 2);
  font-size: calc(var(--s-spacing-large) * 2);
  margin-right: var(--s-spacing-large);
}

.block--size-large .block__content {
  margin-top: var(--s-spacing-large);
  padding-top: var(--s-spacing-large);
}

/* ---------------------------
    Toolbar
-------------------------- */
.url-field {
  max-width: 100%;
}

.editor-url-input input[type='text'],
.block-library-button__inline-link,
.editor-url-input {
  max-width: 100%;
}

.components-base-control {
  width: 100%;
}

/* ---------------------------
    Other
-------------------------- */
@media screen and (min-width: 768px) {
  .edit-post-visual-editor .editor-post-title,
  .edit-post-visual-editor .editor-block-list__block {
    max-width: 100%;
    margin: 0 auto;
  }

  .edit-post-visual-editor .editor-inner-blocks,
  .edit-post-visual-editor [data-type='core/paragraph'],
  .edit-post-visual-editor [data-type='core/heading'],
  .edit-post-visual-editor [data-type='core/list'],
  .editor-post-title__block,
  .wp-block,
  .block {
    max-width: 1000px !important;
    /*margin: 0 auto !important;*/
  }
}