@import '../../../styles/common.scss';

.container {
  display: grid;

  grid-template-rows: max-content;
  grid-template-columns: 1fr;

  &.hasTitle {
    grid-template-rows: max-content;

    padding-top: 6px;
    padding-bottom: 6px;

    &.expanded {
      grid-template-rows: max-content max-content;
    }
  }

  padding: 30px;

  row-gap: 20px;

  .title,
  .main {
    display: grid;
    grid: max-content / 1fr;

    div:last-of-type {
      margin-bottom: 0;
    }
  }

  .title {
    color: var(--infopanel-title-color, $infopanel-title-color);
    font-size: var(--label-font-size, $label-font-size);
    font-weight: var(
      --infopanel-title-font-weight,
      $infopanel-title-font-weight
    );
  }

  background-color: var(
    --infopanel-background-color,
    $infopanel-background-color
  );

  .collapsibleSection {
    & > div:first-child {
      background-color: unset;

      div:last-child {
        margin-left: -18px;
      }

      svg {
        margin-left: -34px;
      }
    }

    & > div:last-child {
      border-bottom: unset;
    }

    & > div > div:last-child {
      background-color: var(
        --infopanel-background-color,
        $infopanel-background-color
      );
    }
  }
}
