.dragHandle {
  display: flex;
  appearance: none;
  border: none;
  position: absolute;
  top: 0;
  left: 50%;
  padding: 2px 24px 2px;
  transform: translateX(-50%) translateY(0);
  z-index: -1;
  border-top-right-radius: var(--radii-small);
  border-top-left-radius: var(--radii-small);
  transition: var(--transition-fast);
  transition-property: transform;
  cursor: grab;
  color: var(--color-content-muted);
  background: none;

  &.dragHandleIsDragging {
    cursor: grabbing;
  }

  :global([data-whatinput="keyboard"]) &:focus {
    outline: none;

    &::before {
      outline: 2px solid var(--color-border-accent);
    }
  }

  &::before {
    content: "";
    display: block;
    background-color: var(--color-background-static-default);
    @extend .pos-1dp;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 6px);
    border-radius: inherit;
    transition: var(--transition-fast);
    transition-property: background-color;
  }
}

.dragHandlePlaceholder {
  position: absolute;
  top: 0;
  left: 50%;
  height: 24px;
  width: 68px;
  transform: translateX(-50%) translateY(-100%);
  z-index: -2;
  cursor: grab;
}

.wrapper {
  --translate-x: calc(-50% - 12px);
  --translate-y: calc(100vh - 100% - 12px);

  overflow: visible;
  position: absolute;
  max-width: 1424px;
  width: calc(100% - 24px);
  margin: 0 12px;
  height: 96px;
  left: 50%;
  transform: translateX(var(--translate-x)) translateY(var(--translate-y));
  right: 12px;
  z-index: var(--z-index-player);
  transition:
    var(--transition-medium) transform,
    var(--transition-slow) opacity;
  opacity: 0;

  &.wrapperIsDragging {
    transition:
      0s transform,
      var(--transition-slow) opacity;
  }

  &.isSpringing {
    transition:
      cubic-bezier(0, 0.405, 0, 1.285) var(--motion-timing-slow) transform,
      var(--transition-slow) opacity;
  }

  &.isCollapsed {
    --translate-y: calc(100vh);
  }

  &.isVisible {
    opacity: 1;
  }
}

.content {
  display: flex;
  overflow: visible;
  background: var(--color-background-static-muted);
  border-radius: var(--radii-medium);
  width: 100%;
  height: 100%;
  z-index: 3;
  @extend .pos-2dp;
}

.section {
  padding: 24px;
  box-shadow: inset -1px 0 0 0 var(--color-border-default);

  &:last-child {
    box-shadow: none;
  }

  &.middle {
    flex: 1;
  }
}

.buttonsWrapper {
  display: flex;
  gap: 8px;
}

.grabbingWrapper {
  z-index: var(--z-index-player-grabbing-container);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: grabbing;
}

.wrapper.isCollapsed .dragHandle,
.wrapper:hover .dragHandle {
  transform: translateX(-50%) translateY(calc(-100%));
}

.dragHandlePlaceholder:hover ~ .dragHandle,
.wrapper:hover .dragHandle:hover,
.wrapper.isCollapsed .dragHandle:hover,
.wrapper.wrapperIsDragging .dragHandle,
:global([data-whatinput="keyboard"]) .dragHandle:focus,
.dragHandle:hover {
  transform: translateX(-50%) translateY(calc(-100% - 6px));

  &::before {
    background-color: var(--color-background-static-strong);
  }
}
