.widget {
  grid-column: 1 / span 8;

  @apply tablet:col-span-full;
}

.separator {
  grid-column: 1 / span 8;
  @apply tablet:col-span-full;
  @apply my-2;
}

.codeEditorContainer {
  grid-column: 1 / span 10;
  @apply tablet:col-span-full;

  @apply flex flex-col;
  @apply gap-y-5;
}

.columnFull {
  grid-column: 1 / span 8;

  @apply tablet:col-span-full;
}

.secretInput {
  grid-column: 1 / span 7;
}

.secretButton {
  grid-column: span 1 / span 1;
  justify-self: center;
  align-self: end;
}

.hookContainer {
  display: flex;
  flex-direction: row;
  column-gap: 12px;
  flex: 1 0 0;
}

.hookHeader {
  display: flex;
  flex-direction: row;
  column-gap: 12px;
  padding: 8px 32px 8px 0;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.blockingHookKind {
  flex: 0.15 0 0;
  min-width: 120px;
}

.blockingHookEvent {
  flex: 0.35 0 0;
  min-width: 270px;
}

.blockingHookConfig {
  flex: 0.5 0 0;
  min-width: 200px;
}

.hookConfig {
  display: flex;
  flex-direction: row;
  align-items: center;
  column-gap: 4px;
}

.hookConfigConfig {
  flex: 1 0 0;
}

.nonblockingHookEvent {
  flex: 0.4 0 0;
  min-width: 100px;
}

.nonblockingHookConfig {
  flex: 0.6 0 0;
  min-width: 200px;
}

.codeEditor {
  height: 50vh;
}

.codeEditorFooter {
  display: flex;
  flex-direction: row;
  column-gap: 8px;
}

.dot {
  margin: 0 4px;
}

.hookList {
  /* stylelint-disable-next-line */
  row-gap: 0 !important;
}

.hookListItem {
  column-gap: 4px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  overflow-y: hidden;
  overflow-x: auto;
  padding: 10px 0;
}
