:root {
  --pagemodule-element-spacing: 0.25rem 0.5rem;
  /* --pagemodule-element-border-radius: 6px; */
  --pagemodule-element-border-radius: 0px;
  --pagemodule-element-box-shadow: 1px 1px 10px -4px rgba(0, 0, 0, 0.65),
    0px 0px 1px 0px rgba(0, 0, 0, 0.45);
  --pagemodule-grid-spacing: 0.5rem;
  --pagemodule-grid-inner-spacing: 0.5rem;
  --pagemodule-grid-cell-bg: #fff;
  --pagemodule-element-hidden-bg: #fff;
  --pagemodule-element-header-bg: #292929;
  --module-docheader-spacing-y: 8px;
  --module-docheader-padding-y: 8px;
  --module-docheader-height: 77px;
}

/* YOAST WIDGET STYLE */
.module-body .yoast-seo-score-bar {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  margin-inline: var(--pagemodule-grid-inner-spacing);
  margin-bottom: 2rem;

  .yoast-seo-score-bar--analysis {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.75rem;
    padding: 0.45rem;
    padding-right: 0.85rem;
    border-radius: 50px;
    background-color: #efeff3;
  }

  .yoast-seo-score-bar--analysis:hover {
    background-color: #dcdce0;
  }
}

.module-body .yoast-seo-snippet-header {
  display: none !important;
}

/* TYPO3 TITLE */
typo3-backend-editable-page-title {
  margin-inline: var(--pagemodule-grid-inner-spacing);
}

/* TYPO3 PAGE COLUMN HEADER */
.t3-page-column-header {
  margin: var(--pagemodule-grid-inner-spacing);
}
.t3-page-column-header-icons {
  inset-inline-end: calc(var(--pagemodule-grid-inner-spacing));
}

.svg-toolbar {
  padding: 8px 10px 0;
}

.svg-toolbar__menu {
  margin: 0rem 0 0.5rem;
}

.svg-toolbar__submenu {
  margin: 0;
}

.btn {
  box-shadow: none;
}

.t3-page-ce-header {
  --icon-color-primary: #fff;

  padding: var(--pagemodule-element-spacing);
  background-color: var(--pagemodule-element-header-bg);
  color: #fff;
  margin-bottom: 1rem;
  border-radius: 0px;
}

.t3-page-ce-header .t3-page-ce-header-left {
  column-gap: 0.5rem;
}

.t3-page-ce-header .icon-markup {
  display: flex;
}

.t3-page-ce-hidden .t3-page-ce-element {
  opacity: 0.35;
  padding: 4px;
  /* height: 45px;
  overflow-y: clip;
  transition: opacity 0.2s ease-out, height 0.2s ease-out; */
}

.t3-page-ce-hidden:hover .t3-page-ce-element {
  opacity: 1;
  transition: opacity 0.2s ease-out, height 0.2s ease-out;
}

.t3-page-ce-element {
  box-shadow: none;
  padding: 4px;
  border: 1px solid #c0c0c0;
}

.t3-page-ce-actions {
  position: relative;
  margin-block: 0.65rem;
  background-color: #ecebed;
  height: 36px;
  padding: 0;
  border-radius: 5px;
  overflow: hidden;
  display: grid;
  place-items: center;
  opacity: 0.7;

  typo3-backend-new-content-element-wizard-button {
    background-color: transparent;
    border-radius: 2px;
    width: 100%;
    box-shadow: none;
    color: #535353;
    border: none;
    font-size: 0.67rem;

    .btn {
      padding: 0.25rem 0.5rem;
      font-size: 0.67rem;
      color: #535353;
      background-color: transparent;
      border: none;
      box-shadow: none;
    }
  }
}

.t3-page-ce-actions:hover {
  opacity: 1;

  .btn:hover {
    background-color: transparent;
  }
}

.t3-grid-table {
  border-collapse: collapse;
  border-spacing: 0;

  tr td {
    border-right: 2px solid #e4e4e4;
  }

  tr td:last-child {
    border-right: none;
  }
}

.t3-grid-container {
  border: none;
}

.t3-page-ce-body {
  padding: 0;
}

.element-preview-header {
  padding-inline: var(--pagemodule-grid-spacing);
  padding-bottom: calc(var(--pagemodule-grid-inner-spacing) / 2);
}

.element-preview-header + .element-preview-content {
  padding-inline: var(--pagemodule-grid-inner-spacing);
  padding-bottom: calc(var(--pagemodule-grid-inner-spacing) / 2);
}

.scaffold-content-navigation-switcher
  .scaffold-content-navigation-switcher-open {
  position: absolute;
  top: 0.4rem;
  right: -1.45rem;
  padding: 0.165rem 0.09rem;
}

.scaffold-content-navigation-available .scaffold-content-navigation-switcher {
  width: 0px;
  padding: 0px;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --bs-body-color: #fff;

    --module-docheader-bg: #484848;

    --module-bg: #000000;

    --pagemodule-grid-cell-bg: #fff;
    --pagemodule-element-hidden-bg: #fff;
    --pagemodule-element-header-bg: #38393c;
  }

  .btn-default {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(50, 50, 50);
    --bs-btn-border-color: #6f6f6f;
  }

  .t3-page-ce-header {
    background-color: var(--pagemodule-element-header-bg);
    color: #fff;
  }

  .form-select {
    color: #fff;
    background-color: #8c8c8c;
    border: var(--bs-border-width) solid #9b9b9b;
  }

  .yoast-seo-snippet-header {
    background-color: #272727 !important;
    color: #ffffff !important;
  }
} */