%code-editor {
  display: block;
  border: 10px;
  overflow: hidden;
  position: relative;
  clear: both;
}

%code-editor::after {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 25px;
  background-color: rgb(var(--tone-gray-999));
  content: '';
  display: block;
}
%code-editor > pre {
  display: none;
}

%code-editor {
  .toolbar-container,
  .toolbar-container .toolbar {
    align-items: center;
    justify-content: space-between;
    display: flex;
  }

  .toolbar-container {
    position: relative;
    margin-top: 4px;
    height: 44px;

    .toolbar {
      flex: 1;
      white-space: nowrap;

      .title {
        padding: 0 8px;
      }

      .toolbar-separator {
        height: 32px;
        margin: 0 4px;
        width: 0;
      }

      .tools {
        display: flex;
        flex-direction: row;
        margin: 0 10px;
        align-items: center;
        .copy-button {
          margin-left: 10px;
        }
      }
    }
    .ember-basic-dropdown-trigger {
      margin: 0 8px;
      width: 120px;
      height: 32px;
      display: flex;
      align-items: center;
      flex-direction: row;
    }
  }
}