@use '../../../../../styles/typography';

:host {
  position: relative;
  height: var(--max-bar-height);
  flex: 0 0 var(--max-bar-height);
  background-color: var(--octonary-contrast);
  border-bottom: 1px solid var(--color-separator);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  gap: 0.375rem;

  .selected-frame {
    @extend %body-01;
    position: absolute;
    top: 0.5rem;
    right: 2rem;
    margin: 0;
    padding: 0.1rem 0.375rem;
    text-align: center;
    background: var(--dynamic-transparent-01);
    backdrop-filter: blur(10px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0.75rem;
    pointer-events: none;
    z-index: 1;
  }

  .bar-container {
    align-items: baseline;
    overflow-x: auto;
    width: 100%;
    height: 100%;
    flex: 1;
    cursor: pointer;

    &.drag-scrolling {
      /* We use an animation for the cursor to avoid
      applying the style when we perform a regular click. */
      animation: grabbing-cursor 1 forwards;
      animation-delay: 200ms;
    }

    &::-webkit-scrollbar {
      display: none;
    }

    ::ng-deep .cdk-virtual-scroll-content-wrapper {
      display: flex;
      column-gap: 2.5px;
    }

    .frame-bar {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        z-index: -1;
      }

      &:hover::before {
        background-color: var(--septenary-contrast);
      }

      &.selected::before {
        background-color: var(--dynamic-blue-01);
      }
    }
  }
}

@keyframes grabbing-cursor {
  from {
    cursor: default;
  }
  to {
    cursor: grabbing;
  }
}
