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

.container {
  @include boxSizing;

  display: grid;
  grid-template-rows: 1fr;
  border-left: 1px solid white;
  position: relative;
  overflow: visible;
  transition: width 0.3s ease-in-out;

  &.noTransition,
  &.noTransition .contentWrapper,
  &.noTransition .content,
  &.noTransition .filler,
  &.noTransition .collapseButton {
    transition: none;
  }

  .contentWrapper {
    display: grid;
    grid-template-rows: min-content 1fr;
    overflow: hidden;
  }

  .collapseButton {
    position: absolute;
    top: 19px;
    left: -12px;
    z-index: 10;
    width: 24px;
    height: 32px;
    background-color: var(
      --infopanel-background-color,
      $infopanel-background-color
    );
    border: none;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    outline: none;
    transition: left 0.3s ease-in-out;

    .collapseIcon {
      width: 16px;
      height: 16px;
      color: var(
        --infopanel-collapse-icon-color,
        $infopanel-collapse-icon-color
      );
      flex-shrink: 0;
      transition: color 0.2s ease-in-out;

      path {
        stroke: currentColor;
      }
    }

    &:hover {
      outline: none;

      .collapseIcon {
        color: var(
          --infopanel-collapse-icon-hover-color,
          $infopanel-collapse-icon-hover-color
        );
      }
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    overflow: hidden;
    width: var(--panel-width);
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
  }

  .filler {
    background-color: var(
      --infopanel-background-color,
      $infopanel-background-color
    );
    width: var(--panel-width);
    transition: transform 0.3s ease-in-out;
    transform: translateX(0);
    overflow: hidden;
  }

  &.collapsed {
    .content {
      transform: translateX(0);
      pointer-events: none;
      max-height: 0;
      overflow: hidden;
    }

    .filler {
      transform: translateX(0);
    }
  }
}
