@use "../../../Sass/common/mixins";
@use "../../../Sass/common/_variables";

.timeline {
  display: table;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  margin-top: 33px;
  font-family: variables.$font-base;
  background: variables.$dark;
  backdrop-filter: variables.$blur;
}

.text-row {
  display: block;
  color: #fff;
  font-size: variables.$font-size-mid-small;
  position: absolute;
  bottom: 40px;
  left: 0px;
  right: 0px;
  // background: variables.$dark;
  padding: 3px 5px;

  // @media (max-width: variables.$mobile) {
  //   position: fixed;
  // }
}

.text-cell {
  display: flex;
}

.layer-name-truncated {
  padding-right: variables.$padding-small;

  @media (max-width: variables.$mobile),
    (min-width: variables.$sm) and (max-width: variables.$lg) {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  @media (max-width: variables.$mobile) {
    max-width: 52vw;
  }

  @media (min-width: variables.$sm) and (max-width: variables.$lg) {
    max-width: 30vw;
  }
}

.controlsRow {
  display: table-row;
}