@import '../../styles/common';

.ActionList {
  --pc-action-list-image-size: 20px;
  --pc-action-list-item-min-height: var(--p-space-10);
  --pc-action-list-item-vertical-padding: calc(
    (var(--pc-action-list-item-min-height) - var(--p-line-height-2)) / 2
  );
  outline: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.Section-withoutTitle:not(:first-child) {
  border-top: var(--p-border-divider);
}

.Actions {
  outline: none;
  list-style: none;
  margin: 0;
  border-top: var(--p-border-divider);
  padding: var(--p-space-2);
}

.ActionList,
.Section:first-child {
  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
  > .Section-withoutTitle .Actions {
    border-top: none;
  }
}

.Title {
  @include text-style-subheading;
  padding: var(--p-space-3) var(--p-space-4) var(--p-space-3) var(--p-space-4);
}

.Section:not(:first-child) .Title {
  padding-top: var(--p-space-1);
}

.Item {
  @include unstyled-button;
  @include focus-ring;
  display: block;
  width: 100%;
  min-height: var(--pc-action-list-item-min-height);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
  border-radius: var(--p-border-radius-1);
  border-top: var(--p-border-width-1) solid transparent;
  color: inherit;
  @media (forced-colors: active) {
    border: var(--p-border-width-1) solid transparent;
  }

  &:hover {
    background-color: var(--p-surface-hovered);
    text-decoration: none;
    outline: var(--p-border-width-3) solid transparent;
  }

  &:active {
    @include recolor-icon(var(--p-interactive));
    background-color: var(--p-surface-pressed);
  }

  &:focus:not(:active) {
    @include focus-ring($style: 'focused');
    outline: var(--p-border-width-3) solid transparent;
  }

  &:visited {
    color: inherit;
  }

  &.active {
    @include recolor-icon(var(--p-interactive));
    background-color: var(--p-surface-selected);

    &::before {
      @include list-selected-indicator;
    }
  }

  &.destructive {
    @include recolor-icon(var(--p-icon-critical));
    color: var(--p-interactive-critical);

    &:hover {
      background-color: var(--p-surface-critical-subdued-hovered);
    }

    // stylelint-disable-next-line selector-max-class
    &:active,
    &.active {
      background-color: var(--p-surface-critical-subdued-pressed);
    }
  }

  &.disabled {
    background-image: none;
    color: var(--p-text-disabled);

    // stylelint-disable-next-line selector-max-class
    .Prefix,
    .Suffix {
      @include recolor-icon(var(--p-icon-disabled));
    }
  }
}

.Content {
  display: flex;
  align-items: center;
}

.Prefix {
  @include recolor-icon(var(--p-icon));
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  height: var(--pc-action-list-image-size);
  width: var(--pc-action-list-image-size);
  border-radius: var(--p-border-radius-base);

  // We need the negative margin to ensure that the image does not set
  // the minimum height of the action item.
  margin: calc(-0.5 * var(--pc-action-list-image-size)) var(--p-space-4)
    calc(-0.5 * var(--pc-action-list-image-size)) 0;
  background-size: cover;
  background-position: center center;
}

.Suffix {
  @include recolor-icon(var(--p-icon));
  margin-left: var(--p-space-4);
}

.ContentBlock,
.ContentBlockInner {
  display: block;
}

.Text {
  @include layout-flex-fix;
  flex: 1 1 auto;
}