@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/breakpoints' as breakpoints;

@mixin gridtemplate($second-row-height) {
  grid-template:
    '. statusdots badge chevron' auto
    'icon text badge chevron' $second-row-height '. text badge chevron' auto /
    min-content auto min-content min-content;
}

@mixin parent-type-expanderlist {
  display: flex;
  align-items: center;
  align-self: start;
  height: 48px;
}

.element-header {
  padding: 0.5rem spacers.getSpacer(2xs) 0.5rem 0;
  display: grid;
  width: 100%;
  height: 100%;
  text-align: left;

  @include gridtemplate(3rem);

  &--compact {
    padding: 0 spacers.getSpacer(2xs) 0 0;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding: 0.125rem spacers.getSpacer(2xs) 0.125rem 0;
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
      padding: 0.5rem spacers.getSpacer(2xs) 0.5rem 0;
    }
  }

  &__title {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
  }

  &__content {
    width: 100%;
    height: 100%;
    grid-area: text;
    align-self: center;
    padding: 10px 0 0.5rem 0.5rem;

    &[data-hasstatusdots='true'] {
      padding-top: 0.25rem;
      padding-bottom: 0;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        padding-top: 0.125rem;
      }
    }

    &--element {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
    }

    &--spacing {
      margin-left: spacers.getSpacer(2xs);
    }

    &--compact {
      padding: 0.7rem 0 0.7rem 1rem;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        padding: 0.57rem 0 0.57rem 2rem;
      }

      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
        padding: 0.57rem 0 0.57rem 1rem;
      }
    }

    :focus > &,
    :focus-visible > & {
      border-color: palette.$black;
    }
  }

  &__statusdot-container {
    grid-area: statusdots;
    padding-left: 0.5rem;
  }

  &__icon,
  &__icon svg,
  &__avatar,
  &__badge-container,
  &__chevron,
  &__chevron svg {
    align-self: center;
    display: flex;
    align-items: center;
  }

  &__icon,
  &__avatar {
    grid-area: icon;

    &--with-statusdot {
      margin-top: -1rem;
    }
  }

  &__icon {
    height: 100%;

    svg {
      height: 100%;
    }
  }

  &__chevron {
    grid-area: chevron;

    svg {
      fill: var(--color-action-graphics-onlight);
      height: 100%;
    }

    &[data-parenttype='linklist'] {
      align-self: center;
      height: 100%;
    }

    &[data-parenttype='expanderlist'] {
      @include parent-type-expanderlist;
    }
  }

  &__badge-container {
    grid-area: badge;
    display: flex;
    flex-flow: row;
    height: 100%;
    gap: 0.5rem;
  }

  &__badge {
    &[data-parenttype='linklist'] {
      align-self: center;
    }

    &[data-parenttype='expanderlist'] {
      @include parent-type-expanderlist;
    }
  }

  &__badge:has(svg),
  &__badge svg {
    height: 100%;
  }
}

.text-wrapper {
  display: flex;
  align-items: flex-start;
  font-size: 20px;
  font-weight: 400;

  &--sub-level {
    font-size: 18px;
  }

  &__text--emphasised {
    font-weight: 600;
  }
}