.editor
{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--padding) var(--padding);

  &:not(.display-tabs), &.hide-tabs
  {
    .ui-tabs-list
    {
      display: none;
    }

    .ui-tab, .editor-infos
    {
      margin-top: 0;
    }
    
    .editor-aside
    {
      margin-top: 0;
    }
  }

  &.has-sidebar
  {
    max-width: 1460px;
    display: grid;
    grid-template-columns: minmax(auto, 1fr) 200px;
    grid-gap: var(--padding);
  }
}

.editor.display-boxes .ui-tab
{
  display: inherit !important;
}

.editor.display-boxes .ui-tab + .ui-tab
{
  margin-top: var(--padding-m);
}

.editor-tab-headline
{
  margin-bottom: var(--padding) !important;
}

.editor-tabs
{
  .ui-tabs-list
  {
    padding: 0;
    margin-bottom: 0;
  }

  .ui-tab
  {
    margin: 0;
  }
}

.editor-aside
{
  margin-top: 58px;
}

.editor-infos
{
  display: block;
  border-top: 1px solid var(--color-line-onbg);
}

.theme-dark .editor-infos
{
  border-top: none;
}

.editor-infos .ui-box
{
  margin: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  display: flex;
  gap: var(--padding-l);
}

.editor-infos .ui-property
{
  flex-direction: column;
  border-top: none;
}

.editor-infos .ui-property-label
{
  font-size: var(--font-size-s);
  font-weight: 400;
  color: var(--color-text-dim);
  width: 100%;
  padding-right: 0;
}

.editor-infos .ui-property-content
{
  font-size: var(--font-size-s);
  font-weight: 400;
  color: var(--color-text-dim);
  margin-top: 2px;
}

.editor-infos-aside .ui-property + .ui-property
{
  margin-top: 0;
}