$border-width: 1px;
$horizontal-padding: 20px;

.container {
  border: $border-width solid transparent;
  transition: border-color 0.2s ease-in-out;

  &:hover,
  &--open {
    border-color: var(--fidesui-neutral-100);
    border-radius: 6px;
  }
}

.itemButton {
  display: block;
  width: 100%;
  border: $border-width solid transparent;
  border-radius: 6px;
  transition: border-color 0.2s ease-in-out;
  margin-bottom: 20px;
  padding: 12px $horizontal-padding;
  text-align: left;
  background: transparent;

  &--error,
  &--comment,
  &--awaiting-input,
  &--polling,
  &:hover {
    border-color: var(--fidesui-neutral-100);
  }

  &:focus-visible {
    border-color: var(--fidesui-neutral-700);
  }

  &--error,
  &--error:hover,
  &--error:focus {
    border-left: 8px solid var(--fidesui-error);
  }

  &--awaiting-input,
  &--awaiting-input:hover,
  &--awaiting-input:focus {
    border-left: 8px solid var(--fidesui-minos);
  }

  &--polling,
  &--polling:hover,
  &--polling:focus {
    border-left: 8px solid var(--fidesui-warning);
  }
}

.header {
  width: 100%;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;

  & > * {
    flex-shrink: 0;
  }
}

.author {
}

.title {
  font-weight: 600;
  flex-shrink: 1;

  &--error {
    color: var(--fidesui-error);
  }

  &--awaiting-input {
    color: var(--fidesui-minos);
  }

  &--polling {
    color: var(--fidesui-warning);
  }

  width: auto;
}

.timestamp {
  color: var(--fidesui-neutral-700);
}

.type {
}

.content {
}

.viewLogs {
  color: var(--fidesui-link);
}

.logs {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
  box-sizing: border-box;
  padding: 0 $horizontal-padding;

  &--open {
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
