.Revisions-listItem {
  border-top: 1px solid var(--color-gray3);
  margin-left: calc(var(--Widget-padding) * -1);
  margin-right: calc(var(--Widget-padding) * -1);
  padding: var(--gap-m) var(--Widget-padding) var(--gap-m) var(--Widget-padding);

  &:first-child {
    margin-top: var(--gap-m);
  }

  &.is-active {
    background-color: var(--color-blue1);
    border-left: solid var(--gap-m) var(--color-blue5);
    padding-left: calc(var(--Widget-padding) - var(--gap-m));
  }

  &.is-log {
    > .Revisions-listItemInfo {
      color: var(--color-gray6);
      display: block;
    }
  }

  &-children {
    display: none;

    .Revisions-listItemInfo {
      margin-left: calc(var(--gap-xs) + var(--Icon-size));
    }
  }

  &-collapseButton {
    cursor: pointer;
    float: left;
    margin-right: var(--gap-xs) !important;

    &::before {
      content: 'keyboard_arrow_down';
      float: right;
      transition: transform var(--time-xs);
      .Icon;
    }

    &.is-active::before {
      float: right;
      transform: rotate(180deg);
      transition: transform var(--time-xs);
      .Icon;
    }

    &:hover::before {
      background-color: var(--color-iconHoverBackground);
      border-radius: var(--gap-m);
    }
  }
}

.Revisions-compare {
  font-size: 0;

  &::before {
    &:extend(.Icon);

    content: 'compare_arrows';
  }
}

.Revisions-more {
  .IconButton;

  --IconButton-name: 'more_horiz';

  &.is-active {
    .IconButton.is-focus;

    --IconButton-name: 'close';
  }
}

.Revisions-filters {
  background-color: var(--color-gray3);
  margin-left: calc(var(--Widget-padding) * -1);
  margin-right: calc(var(--Widget-padding) * -1);
  margin-top: calc(var(--Widget-padding) * -1);
  min-height: calc(var(--gap-l) * 2);
  padding: 0 var(--Widget-padding);
}

.Revisions-filters,
.Revisions-filter {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.Revisions-filter {
  width: 100%;
}

.Revisions-filters ~ .Revisions-list {
  .Revisions-listItem:first-child {
    margin-top: 0;
  }
}

.Revisions-links {
  border-bottom: solid 1px var(--color-gray2);
  font-size: var(--fontSize-s);
}

.Revisions-links > .Revisions-listItem {
  margin-top: 0;
}

.Revisions-links > .Revisions-listItem > a {
  text-decoration: none;
}

.Revisions-label {
  font-size: var(--fontSize-s);
}

.Revisions-toggle {
  .Checkbox;
  .Checkbox.is-toggle;

  text-decoration: none;

  &:hover {
    text-decoration: none;

    &::before {
      opacity: 0.16;
    }
  }

  &.is-active {
    text-decoration: none;

    &::after {
      color: var(--Link-hoverColor);
      content: 'toggle_on';
    }

    &:hover::before {
      background: var(--Link-hoverColor);
    }
  }
}

.Revisions-pagination {
  border-top: 1px solid var(--color-gray3);
  font-size: var(--fontSize-s);
  margin: 0 calc(var(--Widget-padding) * -1);
  padding: 0 var(--Widget-padding);

  .pagination {
    justify-content: space-between;
    width: 100%;
  }
}

.Revisions-new {
  &::before {
    .Icon;

    content: 'add';
    line-height: inherit;
    margin-right: var(--gap-xs);
  }
}

.Revisions-listItemInfo {
  display: flex;
  flex-direction: row;
  font-size: var(--fontSize-s);
  justify-content: space-between;
  line-height: var(--lineHeight-s);
}

.Revisions-listItemLineOne {
  margin-bottom: var(--gap-xs);
}

.Revisions-listItemLineTwo {
  font-size: var(--fontSize-s);
  margin-bottom: var(--gap-xs);
}

.Revisions-listItemLineThree,
.Revisions-listItemLineFour {
  align-items: center;
  display: inline-block;
  font-size: var(--fontSize-s);
  word-break: break-all;
}

.Revisions-userLabel {
  word-break: break-all;

  > .Revisions-userLabelIcon::before {
    content: '\22C5';
    margin: 0 var(--gap-xs);
  }
}

.Revisions-statusLabel {
  word-break: break-word;

  &::before {
    border-radius: 100%;
    content: '';
    display: inline-block;
    height: var(--gap-m);
    line-height: normal;
    margin-right: var(--gap-s);
    vertical-align: middle;
    width: var(--gap-m);

    .Revisions-listItem.is-archived & {
      background-color: var(--color-red6);
    }

    .Revisions-listItem.is-updated & {
      background-color: var(--color-green3);
    }

    .Revisions-listItem.is-draft &,
    .Revisions-listItem.is-scheduled & {
      background-color: var(--color-yellow3);
    }

    .Revisions-listItem.is-live & {
      background-color: var(--color-green5);
    }

    .Revisions-listItem.is-workflow & {
      background-color: var(--workflow-color);
    }
  }
}

.Revisions-info {
  color: var(--color-gray6);
  flex-grow: 2;

  .Revisions-listItemLineOne {
    color: var(--Link-color);
  }

  &:hover {
    color: var(--color-gray6);

    .Revisions-listItemLineOne {
      color: var(--Link-hoverColor);
    }
  }
}

.Revisions-workflowTransition {
  align-items: center;
  display: flex;
}

.Revisions-workflowComment {
  font-style: italic;
}

.Revisions-workflowState {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.Revisions-workflowStateIcon > span::before {
  .Icon;

  content: 'trending_flat';
}
