.custom-template-editor {
  flex: 1;
  display: flex;
  overflow: hidden;

  & > form {
    width: 350px;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--light-gray);

    & header {
      padding: 1rem;
      border-bottom: 1px solid var(--lightest-gray);
    }

    & small {
      background: var(--medium-purple);
      padding: 1rem;
    }

    & main {
      flex: 1;
      overflow-y: auto;
      padding: 1rem;
    }

    & footer {
      display: flex;
      align-items: center;
      justify-content: end;
      border-top: 1px solid var(--lightest-gray);
    }
  }
}

.dark-mode {
  & .custom-template-editor {
    & small {
      background: var(--gray-700);
    }
  }
}