.root {
  display: grid;
  column-gap: 20px;
  row-gap: 20px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.titleSection {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 16px;
  grid-column: 1 / span 8;
  @apply tablet:col-span-full;
}
.toggle {
  margin: 0;
}

.themeColorSection {
  grid-column: 1 / span 5;
  @apply tablet:col-span-full;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.previewSection {
  grid-column: 6 / span 3;
  display: flex;
  flex-direction: column;
  row-gap: 10px;

  @apply tablet:col-span-full;
}

.colorControl {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.colorControlLabel {
  margin: 0;
  padding: 0;
}
.colorPicker {
  margin: 0 -4px;
}

.previewContainer {
  position: relative;
}
.previewWidget {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0 0;
  width: 360px;
}

.appLogoSection {
  grid-column: 1 / span 5;
  @apply tablet:col-span-full;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.appLogoControl {
  display: flex;
  flex-direction: row;
  column-gap: 10px;
}

.appLogoDropdown {
  flex: 3 0 0;
}

.appLogoDimension {
  flex: 1 0 0;
}

.appLogoPadding {
  flex: 1 0 0;
}
