.Theme-toggle {
  .IconButton;

  --IconButton-name: 'brush';

  color: transparent;
  position: fixed;
  right: calc(0px - var(--gap-s));
  top: calc(0px - var(--gap-s));
  z-index: 10000;

  html:not(.is-lightHeader) & {
    .IconButton.is-white;
  }
}

.Theme {
  .Text.is-xs;

  background: var(--color-white);
  bottom: 0;
  box-shadow: 0 0 16px rgb(0 0 0 / 20%);
  opacity: 0;
  padding: var(--gap-l);
  position: fixed;
  right: 0;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition:
    opacity var(--time-xs) var(--ease-in),
    transform var(--time-s) var(--ease-out);
  z-index: 1000;

  &.is-open {
    opacity: 1;
    transform: none;
  }
}

.Theme-close {
  .IconButton;

  --IconButton-name: 'close';

  position: absolute;
  right: var(--gap-m);
  top: var(--gap-xs);
}

.Theme-presetBar {
  margin: var(--gap-m) 0;
}

.Theme-presetLabel {
  display: inline-block;
}

.Theme-preset {
  .Link;

  cursor: pointer;
  display: inline-block;
  margin-left: var(--gap-s);
}

.Theme-title {
  margin: calc(-1 * var(--gap-m) - var(--gap-l)) calc(-1 * var(--gap-l)) 0;
  z-index: unset;
}

.Theme .Message {
  margin: 0 calc(-1 * var(--gap-l));
}

.Theme-saveButtons {
  border-top: 1px solid var(--color-gray3);
  margin-top: var(--gap-l);
  padding-top: var(--gap-l);

  button:not(:last-child) {
    margin-right: var(--gap-l);
  }
}

.CIG-row[data-field-name='cms.colors'] {
  &.is-hidden {
    display: none;
  }
}

.Theme-options {
  td {
    padding: 0 var(--gap-s);
  }

  .Checkbox {
    .Checkbox.is-toggle;
  }
}

.Theme-colors {
  td {
    min-width: var(--gap-l);

    input[type] {
      width: 3em;
    }
  }

  tr:not(:first-child) {
    td {
      &:first-child,
      &:nth-child(2) {
        padding-right: var(--gap-s);
      }
    }
  }

  .sp-replacer {
    width: 10em;
  }
}

.is-boxedInput {
  .Checkbox {
    padding: 0;
  }

  .ComboInput {
    padding-left: var(--gap-s);

    &::before {
      border-width: 1px;
    }
  }

  .ComboInput[aria-expanded='true'] {
    &::before {
      border-bottom-width: 1px;
    }
  }

  input[data-previewable='true']:not([data-preview]),
  input[data-previewable='true'][data-preview=''] {
    + .ContentSelector-search {
      border-width: 1px;
      padding: calc(var(--gap-s) - 1px);
      padding-right: calc(var(--gap-m) + var(--Icon-size) - 1px);
    }
  }

  .ContentEdit-publish,
  .ContentEdit-previewControls,
  .ContentEdit-previewTypes {
    .DateTimeInput::before {
      border-width: 0;
    }

    @media (@mq-s) {
      .DateTimeInput {
        &::before {
          border-width: 1px;
        }

        &.is-empty {
          padding-left: 0;

          &::before {
            border-width: 0;
          }
        }
      }
    }
  }

  .DateTimeInput {
    @media (@mq-s) {
      padding-left: var(--gap-s);

      &::before {
        border-width: 1px;
      }
    }
  }

  .ProseMirror-fullscreen-container-header .InputWrapper input[type='text'] {
    border-bottom-width: 1px;
  }

  .SearchInput {
    label {
      left: calc(1px + var(--gap-s));
    }

    input[type='text'] {
      padding-left: calc(1px + var(--gap-s) + var(--Icon-size) + var(--gap-xs));
    }
  }

  .FormFilter-container,
  .SearchInput.is-filter {
    label {
      left: calc(var(--gap-l) / 2);
    }

    input[type='text'] {
      padding-left: calc(var(--Icon-size) + var(--gap-xs) - 1px);
    }
  }

  .TextInput {
    border-width: 1px;
    padding: calc(var(--gap-s) - 1px);
  }

  .Calendar-time {
    .ComboInput {
      &,
      .ComboInput-filter {
        width: calc(2em + var(--gap-s) * 2 + var(--Icon-size) + 1px);
      }
    }
  }
}
