/** ## Root */

/** - Unique CSS variables */
:root {
  --about-blank-empty-state-display: none;
  --about-blank-icon-text-gap: 10px;
  --about-blank-empty-state-container-max-height: 280px;
  --about-blank-empty-state-list-margin-top: 20px;
  --about-blank-empty-state-list-margin-top-mobile: 40px;
}

/** ## Empty file view */

/** - Elements of the empty file view are in principle hidden and controlled by unique variables. */
.workspace-split.mod-root .empty-state-action:not(.about-blank-visible),
.workspace-split.mod-root .empty-state-title:not(.about-blank-visible) {
  display: var(--about-blank-empty-state-display);
}

.about-blank-button-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.about-blank-button-container:has(.svg-icon) .about-blank-button {
  padding-left: var(--about-blank-icon-text-gap);
}

/** - Adjust the position of the action list. */

.workspace-split.mod-root .empty-state-container {
  max-height: var(--about-blank-empty-state-container-max-height);
}

.workspace-split.mod-root .empty-state-action-list {
  margin-top: var(--about-blank-empty-state-list-margin-top);
}

.workspace-split.mod-root .empty-state-action-list.is-mobile {
  margin-top: var(--about-blank-empty-state-list-margin-top-mobile);
}

/** ## UI components */

/** - Apply CTA to extra buttons. */
.about-blank-cta-ex-button {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}
.about-blank-cta-ex-button.clickable-icon:hover {
  opacity: unset;
  color: unset;
  background-color: var(--interactive-accent-hover);
}

/** - Box to display icon text (similar to an extra button). */
.about-blank-icon-text {
  padding: var(--size-2-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--clickable-icon-radius);
}
/** - Among icon text, those representing the icon of the action. */
.about-blank-action-icon-text {
  padding: var(--size-2-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--background-modifier-border);
  padding-right: var(--size-2-3);
  margin-right: var(--size-2-3);
}
/** - Class for giving CTA to icon text. */
.about-blank-cta-icon {
  background-color: var(--interactive-accent);
  color: var(--text-on-accent);
}

/** - Apply styles to extra buttons that fail to set icons. */
.about-blank-fake-ex-button {
  background-color: var(--interactive-normal);
  box-shadow: var(--input-shadow);
}

/** - Fake icons set on extra buttons and icon text that fail to set icons. */
.about-blank-fake-icon {
  height: var(--icon-size);
  width: var(--icon-size);
  stroke-width: var(--icon-stroke);
}

/** ## Settings */

.is-phone .about-blank-setting-action-header {
  display: flex !important;
  flex-direction: row !important;
}

.is-phone .about-blank-setting-action-header .setting-item-control {
  width: min-content !important;
}

.about-blank-setting-action-content {
  border-top: none;
}

.is-phone .about-blank-setting-action-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.about-blank-setting-action-content .setting-item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px;
}

.about-blank-setting-action-content .setting-item-control {
  display: none;
}

.about-blank-setting-action-content-group {
  border-top: none;
}

.about-blank-setting-action-save-notice {
  border-top: none;
  padding-top: 0px;
}

.is-phone .about-blank-setting-action-save-notice {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-top: 0px !important;
}

.about-blank-setting-action-save-notice .setting-item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0px;
}

.about-blank-setting-action-save-notice .setting-item-info .setting-item-description {
  font-size: var(--font-ui-small);
  color: var(--text-warning);
}

.about-blank-setting-action-save-notice .setting-item-control {
  display: none;
}

/** - This class is used to prevent the height per action from fluctuating when "Switch info" is performed.
      Currently, the highest component is the "text box", so by setting this height,
      it will always be displayed at that height. */
.about-blank-icon-height-adjuster {
  height: var(--input-height);
}
