@use 'sass:map';

$size: (
  xs: 24,
  sm: 32,
  md: 40,
  lg: 48
);

@each $name, $value in $size {
  $bodyOffset: calc(($value - 2) / 2);
  .mx-expander-item-#{$name} {
    .mx-expander-item-body {
      padding-left: #{$value}px;
      &::before {
        left: #{$bodyOffset}px;
      }
    }
  }
}

.mx-expander-item {
  .mat-icon-button {
    margin-right: 4px;
  }

  &.mx-expander-item-disabled {
    .mx-expander-item-header {
      &:hover {
        cursor: initial;
      }
    }
  }
}

.mx-expander-item-header {
  display: flex;
  align-items: center;
  width: fit-content;
  &:hover {
    cursor: pointer;
  }
}

.mx-expander-item-body {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
  }

  &.hide-border {
    &::before {
      width: 0;
    }
  }
}