@import "color_utils";

.a_list_group {
  --a_list_group_color: var(--a_color_text);
  --a_list_group_bg: var(--a_color_body_bg);
  --a_list_group_border_color: var(--a_border_color);
  --a_list_group_border_width: 1px;
  --a_list_group_border_radius: var(--a_border_radius);
  --a_list_group_item_padding_x: 1rem;
  --a_list_group_item_padding_y: 0.5rem;
  --a_list_group_item_not_first_margin_top: 0;
  --a_list_group_item_not_first_border_top_width: 0;
  --a_list_group_item_border_radius: 0;
  --a_list_group_item_first_border_radius: var(--a_list_group_border_radius) var(--a_list_group_border_radius) 0 0;
  --a_list_group_item_last_border_radius: 0 0 var(--a_list_group_border_radius) var(--a_list_group_border_radius);

  --a_list_group_action_color: var(--a_color_secondary);
  --a_list_group_action_hover_color: #000;
  --a_list_group_action_hover_bg: var(--a_color_gray_200);
  --a_list_group_action_active_color: var(--a_color_text);
  --a_list_group_action_active_bg: var(--a_color_secondary);
  --a_list_group_disabled_color: var(--a_color_secondary);
  --a_list_group_disabled_bg: var(--a_color_text);
  --a_list_group_active_color: #fff;
  --a_list_group_active_bg: var(--a_color_primary);
  --a_list_group_active_border_color: var(--a_color_primary);


  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--a_list_group_border_radius);
}

.a_list_group_gap {
  --a_list_group_item_not_first_margin_top: 1rem;
  --a_list_group_item_not_first_border_top_width: 1px;
  --a_list_group_item_border_radius: var(--a_list_group_border_radius);
  --a_list_group_item_first_border_radius: var(--a_list_group_border_radius);
  --a_list_group_item_last_border_radius: var(--a_list_group_border_radius);
}

.a_list_group__item_action {
  width: 100%;
  color: var(--a_list_group_action_active_color);
  text-align: inherit;

  &:hover,
  &:focus {
    z-index: 1;
    color: var(--a_list_group_action_hover_color);
    text-decoration: none;
    background-color: var(--a_list_group_action_hover_bg);
  }

  &:active {
    color: var(--a_list_group_action_active_color);
    background-color: var(--a_list_group_action_active_bg);
  }
}

.a_list_group__item {
  position: relative;
  display: block;
  padding: var(--a_list_group_item_padding_y) var(--a_list_group_item_padding_x);
  color: var(--a_list_group_color);
  text-decoration: none;
  background-color: var(--a_list_group_bg);
  border: var(--a_list_group_border_width) solid var(--a_list_group_border_color);
  border-radius: var(--a_list_group_item_border_radius);
  &:first-child {
    border-radius: var(--a_list_group_item_first_border_radius);
  }
  &:last-child {
    border-radius: var(--a_list_group_item_last_border_radius);
  }

  &.disabled,
  &:disabled {
    color: var(--a_list_group_disabled_color);
    background-color: var(--a_list_group_disabled_bg);
    cursor: none;
  }

  &.active {
    z-index: 2;
    color: var(--a_list_group_active_color);
    background-color: var(--a_list_group_active_bg);
    border-color: var(--a_list_group_active_border_color);
  }

  & + & {
    border-top-width: var(--a_list_group_item_not_first_border_top_width);
    margin-top: var(--a_list_group_item_not_first_margin_top);
    &.active {
      margin-top: calc(var(--a_list_group_border_width) * -1);
      border-top-width: var(--a_list_group_border_width);
    }
  }
}

.a_list_group_edge {
  --a_list_group_border_radius: 0;
  > .a_list_group__item {
    border-width: 0 0 var(--a_list_group_border_width);
    &:last-child {
      border-bottom-width: 0;
    }
  }
}

@each $state in map-keys($a_theme_colors) {
  .a_list_group__item_#{$state} {
    --a_list_group_color: var(--a_color_#{$state}_text_emphasis);
    --a_list_group_bg: var(--a_color_#{$state}_bg_subtle);
    --a_list_group_border_color: var(--a_color_#{$state}_border_subtle);
    --a_list_group_action_hover_color: var(--a_color_emphasis_color);
    --a_list_group_action_hover_bg: var(--a_color_#{$state}_border_subtle);
    --a_list_group_action_active_color: var(--a_color_emphasis_color);
    --a_list_group_action_active_bg: var(--a_color_#{$state}_border_subtle);
    --a_list_group_active_color: var(--a_color_#{$state}_bg_subtle);
    --a_list_group_active_bg: var(--a_color_#{$state}_text_emphasis);
    --a_list_group_active_border_color: var(--a_color_#{$state}_text_emphasis);
  }
}