@use 'sass:map';
@use '@ecl/theme-ec/theme' as *;

.group-list-parent {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

.group-list-item {
  background-color: var(--ws-c-n-20);
  border-width: 0;
  box-sizing: border-box;
  color: var(--ws-c-d);
  display: block;
  font: var(--ws-f-m);
  font-weight: map.get($theme, 'font-weight', 'bold');
  margin: 0;
  padding: var(--ws-s-s) var(--ws-s-xs) var(--ws-s-s) var(--ws-s-m);
  text-align: left;
  text-decoration: none;
  text-transform: capitalize;
  width: 100%;

  &.level-0 {
    padding: var(--ws-s-s) var(--ws-s-xs) var(--ws-s-s) var(--ws-s-m);
  }

  &.level-1 {
    padding: var(--ws-s-s) var(--ws-s-xs) var(--ws-s-s) var(--ws-s-xl);
  }

  &.level-2 {
    padding: var(--ws-s-s) var(--ws-s-xs) var(--ws-s-s) var(--ws-s-3xl);
  }
}

.group-list-item:hover,
.group-list-item:focus {
  background-color: var(--ws-c-n-60);
  outline: none;
}

.group-list-item:active {
  background-color: var(--ws-c-n-80);
}

.button {
  appearance: none;
  background-color: transparent;
  border-width: 0;
  padding: var(--ws-s-s);
}

.button:hover,
.button:focus {
  background-color: var(--ws-c-n-60);
  cursor: pointer;
  outline: none;
}

.button:active {
  background-color: var(--ws-c-n-80);
}

.icon {
  display: block;
  height: 0.875rem;
  width: 0.875rem;
  transition: transform 200ms ease-in-out;
}

.icon-rotate-90 {
  transform: rotate(90deg);
}

.icon-rotate-180 {
  transform: rotate(180deg);
}

:global(.no-js) .icon {
  transform: rotate(180deg);
}
