@import '../../variables';

.#{$prefix}-ui-seekbar-label {
  @extend %ui-container;

  @include hidden-animated;

  bottom: 100%;
  left: 0;
  margin-bottom: 0.2em;
  pointer-events: none;
  position: absolute;
  text-align: center;

  // Center container on left edge to get it centered over timeline position
  %center-on-left-edge {
    margin-left: -50%;
    margin-right: 50%;
    position: relative;
  }

  > .#{$prefix}-container-wrapper {
    @extend %center-on-left-edge;

    padding-left: 1em;
    padding-right: 1em;
  }

  .#{$prefix}-seekbar-label-inner {
    overflow: hidden;

    > .#{$prefix}-container-wrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      // sass-lint:disable no-misspelled-properties
      row-gap: 0.5em;

      .#{$prefix}-seekbar-thumbnail {
        width: 7em;
        border: solid $color-primary 0.0625em;
        border-radius: $border-radius;
      }

      .#{$prefix}-seekbar-label-metadata {
        background-color: $color-background-text;
        bottom: 0;
        box-sizing: border-box;
        display: inline-block;
        padding: 0.3em 0.5em;
        width: fit-content;
        border-radius: $border-radius;
      }

      .#{$prefix}-seekbar-label-time {
        display: block;
      }

      .#{$prefix}-seekbar-label-title {
        @include hidden;

        display: block;
        white-space: normal;
      }
    }
  }
}