@use 'sass:map' as map;
@use 'styles/animation-curves' as animation-curves;
@use 'styles/theming' as theming;

:host {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100vw;
  height: 60vh;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: map.get(theming.$theme, 'color', 'primary', 'default');
  color: map.get(theming.$theme, 'color', 'primary', 'default-contrast');
  overflow: hidden;

  // Use style sheet instead of animation engine here because the animation
  // engine is unable to preserve the state of a component in the :leave
  // animation
  &.expanded {
    height: calc(100vh - 54px);
    overflow-y: auto;
  }

  transition: height 300ms animation-curves.$deceleration;

  .avatar-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .bar-background {
      height: 16px;
      width: 100%;
      background-color: map.get(theming.$theme, 'color', 'primary', 'darker');
    }

    .wrapper-background {
      $svgPath: 'M0 0C8.5 0 29.5 0 40 13C50.5 26 58.5 36.5 76.5 36.5C94.5 36.5 102.5 26 113 13C123.5 0 144.5 0 153 0H0Z';
      width: 153px;
      height: 37px;
      clip-path: path($svgPath);
      background-color: map.get(theming.$theme, 'color', 'primary', 'darker');
      transform: translateY(-1px); // remove white gap
    }

    .avatar {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
  }

  .content {
    margin: 0 8px;
  }
}
