/* ==========================================================================
   Main.
   ========================================================================== */
.cke_editable {
  margin: 0;
  padding: var(--space-l);
  max-width: none;
  background-color: #fff;
  box-sizing: border-box;
}

.cke_reset_all.cke_dialog_container {
  .cke_dialog_body {
    width: 400px;
    left: 50%;
    transform: translateX(-50%);
  }

  .cke_dialog_contents {
    tr:nth-of-type(2n) td {
      background: none;
    }

    #icon-preview {
      position: absolute;
      right: 30px;
      top: 100px;
    }
  }
}

#skip-link {
  margin: 0;
}

.ajax-progress {
  display: none;
}


/* ==========================================================================
   Tabs.
   ========================================================================== */
.tabs-wrapper {
  position: fixed;
  width: 120px;
  height: 120px;
  z-index: 125;
  left: 0;
  bottom: 0;
  transition: left .2s;

  &:focus,
  &:hover {
    .tabs--primary {
      opacity: 1;
      visibility: visible;
    }
  }

  @media screen and (min-width: 769px) {
    .l-menu-dashboard & {
      left: var(--sidebar-width);
    }

    .l-menu-dashboard-open & {
      left: var(--sidebar-width-open);
    }
  }

  .route--user-login &,
  .route--user-pass & {
    display: none;
  }
}

.tabs--primary-toggle {
  position: absolute;
  z-index: 25;
  left: var(--space-l);
  bottom: var(--space-l);
  padding: var(--space-m);
  width: 60px;
  height: 60px;
  background: var(--color-fg-primary);
  border-radius: 50%;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .15);
  transition: .2s;

  .icon {
    --icon-size: var(--icon-size-s);
    position: relative;
    top: 50%;
    transform: translateY(-50%);

    &:before {
      background-color: var(--color-bg);
    }
  }
}

.tabs--primary {
  position: absolute;
  z-index: 5;
  bottom: 60px;
  left: 50px;
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
  padding: var(--space-xs) 0;
  min-width: 150px;
  background: var(--color-bg);
  border-radius: 4px;
  font-family: var(--font-family-secondary-medium);
  font-size: var(--font-size-l);
  box-shadow: 0 0 10px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transition: .3s;

  li {
    display: block;
    float: none;
    width: 100%;
    margin-bottom: -1px;
    background: none;

    a {
      display: block;
      padding: 8px var(--space-l);
      color: var(--color-text);
      line-height: 1.3;
      background: none;
      transition: .3s;

      &:focus,
      &:hover,
      &.is-active {
        color: var(--color-fg-primary);
      }

      &:focus,
      &:hover {
        background-color: var(--color-bg-primary);
      }
    }
  }
}


/* ==========================================================================
   Admin block.
   ========================================================================== */
.block-form {
  .form-item-settings-admin-label,
  .form-item-settings-label,
  .form-item-settings-label-display,
  .js-form-type-vertical-tabs,
  .js-form-type-machine-name,
  .form-item-region {
    display: none;
  }

  .form-wrapper .form-wrapper {
    background-color: var(--color-bg);
  }

  details.form-wrapper {
    border: 1px solid var(--color-border);
    border-radius: 4px;

    summary {
      padding: 10px var(--space-m);
      font-weight: bold;
      cursor: pointer;
      transition: background-color .2s;
    }

    &[open] summary {
      margin-bottom: 10px;
    }

    &[open] summary,
    summary:hover {
      background-color: var(--color-bg);
    }

    & > .form-item {
      margin-left: var(--space-m);
      margin-right: var(--space-m);
    }
  }
}


/* ==========================================================================
   Form preview.
   ========================================================================== */
.node-preview-container {
  bottom: 0;

  a {
    padding: 6px;
    color: #fff;
  }
}

.node-preview-form-select {
  margin: 0;

  .js-form-item-view-mode {
    display: none;
  }
}

/* ==========================================================================
   Contextual links.
   ========================================================================== */
.toolbar .toolbar-tab.contextual-toolbar-tab,
.contextual {
  display: none;
}

.layout-builder {
  .contextual {
    display: inline;
  }
}