#bottom-bar {
  position: fixed;
  left: 0;
  bottom: calc(var(--header-h) * -0.75);
  &.is-visible {
    bottom: 0px;
  }

  z-index: calc(var(--z-header) - 10);
  height: calc(var(--header-h) * 0.75);
  width: 100vw;
  background-color: var(--color-bg);

  padding-left: var(--padding-body);
  padding-right: var(--padding-body);

  transition: bottom var(--transition-scroll);

  .progress-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 2px;
    width: 100vw;
    background-color: var(--grey-800);

    .progress-bar {
      height: 2px;
      background-color: var(--color-txt);
      width: 40%;
    }
  }

  .bottom-bar__inner {
    height: calc(var(--header-h) * 0.75);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--padding-inner);
  }

  .btn--back-to-top {
    @include icon(20px);
    position: relative;
    top: -3px;
    width: 100px;

    a {
      justify-content: flex-end;
    }

    .icon {
      transform: rotate(-90deg);
      transform-origin: center;
      svg {
        fill: var(--color-txt);
      }
    }
  }

  .title-group {
    font-size: var(--fs-small);
    display: flex;
    color: var(--color-txt-light);
    flex-grow: 1;
    width: 100%;
    padding-top: 5px;

    min-width: 0;

    .title-type {
      text-transform: uppercase;
      &::after {
        content: "/";
        padding-left: 1ch;
        padding-right: 1ch;
      }
    }

    .title {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  @media #{$small} {
    // display: flex;
    // align-items: center;
    // justify-content: center;
    .bottom-bar__inner {
      height: calc(var(--header-h) * 0.75);
      justify-content: center;
      align-items: center;
    }

    .btn--download,
    .btn--back-to-top {
      display: none;
    }
  }

  @media #{$x-small} {
    display: flex;
    align-items: center;
    justify-content: center;
    .title-group {
      display: none;
    }
  }
}