@value selectionColor from './colors.module.css';
@value selectionWidth: 3px;

.root {
  position: relative;
}

.withTransition {
  composes: sectionWithTransition from './outline.module.css';
}

.hiddenIndicator {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hidden .hiddenIndicator {
  display: block;
}

.outline {
  position: relative;
  border: solid selectionWidth transparent;
  border-radius: rounded();
  padding: 1px;
  margin-left: -6px;
  margin-right: -6px;
}

.selectable:hover .outline,
.active .outline {
  border: solid selectionWidth selectionColor;
}

.cutoffIndicator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  padding: 5px 0;
  font-weight: 500;
  color: var(--ui-error-color);
}

.cutoffIndicator::before,
.cutoffIndicator::after {
  content: "";
  flex: 1;
  border-top: solid 1px var(--ui-error-color);
}

.thumbnailContainer {
  position: relative;
  background-color: var(--ui-surface-color);
}

.hidden .thumbnail > * > * {
  opacity: 0.3;
}

.clickMask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  cursor: pointer;
}

.dragHandle {
  composes: dragHandle from './outline.module.css';
  --outline-drag-handle-transition-delay: 0.2s;
  color: var(--ui-on-primary-color);
  text-shadow: 0 0 2px #000;
}

.invert .dragHandle {
  color: var(--ui-primary-color);
  text-shadow: 0 0 2px #fff;
}

.inner:hover .dragHandle {
  opacity: 1;
}

.dropDownButton {
  position: absolute;
  top: 4px;
  right: 0;
  z-index: 1;
}

.dropDownButton button {
  --ui-on-button-color: var(--ui-on-primary-color);
  text-shadow: 0 0 2px #000;
  box-shadow: none !important;
  opacity: 0.3;
  transition: opacity 0.1s ease;
  transition-delay: 0.2s;
}

.invert .dropDownButton button {
  --ui-on-button-color: var(--ui-primary-color);
  text-shadow: 0 0 2px #fff;
}

.inner:hover .dropDownButton button,
.dropDownButton button:global(.hover) {
  opacity: 1;
}

.creating .dropDownButton,
.destroying .dropDownButton,
.failed .dropDownButton {
  display: none;
}

.editTransition {
  composes: transition from './outline.module.css';
  border: 0;
  background: transparent;
  padding: 5px 5px 5px 2px;
  cursor: pointer;
  color: var(--ui-on-surface-color-light);
  opacity: 0.8;
  text-align: left;
  display: flex;
  gap: 9px;
}

.editTransition:hover,
.editTransition:focus {
  opacity: 1;
}

.editTransition img {
  vertical-align: top;
}

.transition {}

.creating .creatingIndicator     { display: block; }
.destroying .destroyingIndicator { display: block; }
.failed .failedIndicator         { display: block; }

.creatingIndicator   { composes: creatingIndicator from './outline.module.css'; }
.destroyingIndicator { composes: destroyingIndicator from './outline.module.css';  }
.failedIndicator     { composes: failedIndicator from './outline.module.css'; }
