/**
 * The top bar shown for all external editors.
 */
#external-editor-header {
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 4px;

  margin-left: calc(4px + env(titlebar-area-x));
  margin-top: env(titlebar-area-y);
  width: calc(env(titlebar-area-width) - 8px);
  height: env(titlebar-area-height);
}

#external-editor-header .leftSide {
  align-items: center;
  flex: 1;
  display: flex;
  gap: 4px;
}

#external-editor-header .rightButtons {
  display: flex;
  align-items: center;
  gap: 4px;
}

#external-editor-header select {
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen-Sans, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background-color: rgba(255, 255, 255, 0.09);
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  color: #fafafa;
  height: 30px;
  padding: 4px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1876em;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#external-editor-header select:disabled {
  color: #bdbdbd;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}

/**
 * A button looking like the GDevelop default dark theme buttons.
 */
#external-editor-header button {
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen-Sans, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  background-color: transparent;
  border: 1px solid #fafafa;
  color: #fafafa;
  border-radius: 8px;
  height: 30px;

  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;

  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
#external-editor-header button:hover {
  background-color: rgba(250, 250, 250, 0.08);
}

/**
 * A button looking like the GDevelop default dark theme primary buttons.
 */
#external-editor-header button.primary {
  background-color: #4f28cd;
  border-color: #4f28cd;
  color: #fafafa;
}
#external-editor-header button.primary:hover {
  background-color: #37238f;
  border-color: #37238f;
}

/**
 * An input looking like the GDevelop default dark theme inputs.
 */
#external-editor-header input {
  position: relative;
  font-family: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Oxygen-Sans, Ubuntu, 'Helvetica Neue', Helvetica, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  border: 0;
  width: 100%;
  height: 30px;
  padding: 4px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.1876em;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: rgba(255, 255, 255, 0.09);
  color: #fafafa;
}

#external-editor-header input:disabled {
  color: #bdbdbd;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.4);
}