@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

:host {
  display: block;
  margin-bottom: var(--sky-margin-stacked-xl);
}

h2 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;

  li {
    margin: 0;
  }
}

.sky-needs-attention-item-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 5fr 1fr;
  grid-template-areas: 'action icon';

  &:not(:first-child) {
    padding-top: var(--sky-margin-stacked-lg);
  }

  &:not(:last-child) {
    padding-bottom: var(--sky-margin-stacked-lg);
  }
}

.sky-needs-attention-item {
  grid-area: action;
  text-align: left;
  width: 100%;
  white-space: normal;

  &-icon {
    grid-area: icon;
    text-align: right;
    color: $sky-theme-modern-font-deemphasized-color;
  }

  &:focus-visible {
    outline: none;

    &:not(:active) {
      @include mixins.sky-theme-modern-border-focus(
        $sky-theme-modern-border-color-primary-dark,
        $sky-theme-modern-elevation-3-shadow-size,
        $sky-theme-modern-elevation-3-shadow-color
      );
    }
  }
}

.sky-needs-attention-item::before {
  content: ' ';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
}

button.sky-needs-attention-item.sky-border-bottom-row {
  @include mixins.sky-border(row, bottom);
}
