@layer etch-reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Remove default margins */
  * {
    margin: 0;
  }

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    scrollbar-gutter: stable;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  ul[class]:not(
      [data-etch-has-custom-classes="false"],
      .wp-block-list,
      .list,
      [class*="marker"]
    ),
  ol[class]:not(
      [data-etch-has-custom-classes="false"],
      .wp-block-list,
      .list,
      [class*="marker"]
    ) {
    padding: 0;
    list-style: none;
  }

  /* Set body min height */
  body {
    min-block-size: 100svh;
    display: flex;
    flex-direction: column;

    main {
      flex-grow: 1;
    }
  }

  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }

  /* Make media easier to work with */
  img,
  picture,
  video,
  canvas,
  svg:not(.block-editor-list-view-tree svg),
  a:not(
    p > a,
    span > a,
    h1 > a,
    h2 > a,
    h3 > a,
    h4 > a,
    h5 > a,
    h6 > a,
    li > a,
    em > a,
    q > a,
    label > a,
    strong > a,
    figcaption > a,
    .editor-styles-wrapper a
  ) {
    max-inline-size: 100%;
    height: auto;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
    font-size: inherit;
  }

  button {
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: currentColor;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Avoid text overflows */
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }

  figure > img {
    inline-size: 100%;
  }

  img {
    block-size: auto;
  }

  /* Add back select GB styles that are removed by global settings toggle */
  .has-text-align-center {
    text-align: center;
  }

  .has-text-align-left {
    text-align: left;
  }

  .has-text-align-right {
    text-align: right;
  }

  .has-fit-text {
    white-space: nowrap !important;
  }

  #end-resizable-editor-section {
    display: none;
  }

  .aligncenter {
    clear: both;
  }

  .items-justified-left {
    justify-content: flex-start;
  }

  .items-justified-center {
    justify-content: center;
  }

  .items-justified-right {
    justify-content: flex-end;
  }

  .items-justified-space-between {
    justify-content: space-between;
  }

  .screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
  }

  .screen-reader-text:focus {
    background-color: #ddd;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
  }
}