$image-size: rem(20px);
$item-min-height: rem(40px);
$item-vertical-padding: ($item-min-height - line-height(body)) / 2;

.p_hw {
  list-style: none;
  margin: 0;
  padding: spacing(tight) 0;
}

.p_jh:not(:first-child) {
  border-top: border();
  margin-top: spacing(tight);
  padding-top: spacing(tight);
}

.p_l7 {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: border();
}

.p_hw,
.p_tn:first-child {
  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
  > .p_jh .p_l7 {
    border-top: none;
  }
}

.p_wf {
  @include text-style-subheading;
  padding: (spacing(tight) * 1.5) spacing();
}

.p_pw {
  @include unstyled-button;
  @include unstyled-link;
  display: block;
  width: 100%;
  min-height: $item-min-height;
  padding: $item-vertical-padding spacing();
  text-align: left;
  cursor: pointer;
  border-radius: 0;

  &:active {
    @include state(active);

    &:hover {
      @include state(active, hover);

      // stylelint-disable-next-line selector-max-specificity
      &:focus {
        @include state(active, hover, focused);
      }
    }
  }

  &:hover {
    @include state(hover);

    &:focus {
      @include state(hover, focused);
    }
  }

  &:focus {
    @include state(focused);
  }

  &.p_nc {
    color: color('red', 'dark');

    &:active {
      @include state(active-destructive);

      // stylelint-disable-next-line selector-max-specificity
      &:hover {
        @include state(active-destructive, hover-destructive);

        // stylelint-disable-next-line selector-max-specificity, max-nesting-depth
        &:focus {
          @include state(
            active-destructive,
            hover-destructive,
            focused-destructive
          );
        }
      }
    }

    &:hover {
      @include state(hover-destructive);

      // stylelint-disable-next-line selector-max-specificity
      &:focus {
        @include state(hover-destructive, focused-destructive);
      }
    }

    &:focus {
      @include state(focused-destructive);
    }
  }

  &.p_sv {
    @include state(disabled);
    color: color('ink', 'lightest');
    pointer-events: none;

    .p_el {
      @include recolor-icon(color('ink', 'lightest'), color('white'));
    }
  }

  &::-moz-focus-inner {
    border: none;
  }
}

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

.p_el {
  @include recolor-icon(color('ink', 'light'), color('white'));
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  align-items: center;
  height: $image-size;
  width: $image-size;
  border-radius: border-radius();

  // We need the negative margin to ensure that the image does not set
  // the minimum height of the action item.
  margin: (-0.5 * $image-size) spacing() (-0.5 * $image-size) 0;
  background-size: cover;
  background-position: center center;
}

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

.p_tz {
  margin-left: spacing();
}