@use 'global/common' as global;

/* ------------------------------
 タイムライン
------------------------------- */
.acms-timeline {
  position: relative;
  padding-left: 20px;
  list-style: none;

  &::before {
    position: absolute;
    width: global.$timeline-line-width;
    height: 100%;
    content: '';
    background: global.$timeline-line-color;
  }
}

.acms-timeline-mark {
  position: absolute;
  left: -55px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 15%);
}

.acms-timeline-side {
  position: relative;
  left: -15px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 15%);
}

.acms-timeline-label {
  padding: 5px 10px;

  @include global.font-size(global.$timeline-label-font-size);
}

.acms-timeline-status-label {
  float: left;
  margin-right: 10px;
  line-height: 1.2;
}

.acms-timeline-item-group {
  margin-top: global.$timeline-itemgroup-margin-top;
  list-style: none;
}

.acms-timeline-item {
  position: relative;
}

.acms-timeline-panel {
  padding: global.$timeline-panel-padding;
  margin: global.$timeline-panel-margin;
  border: global.$timeline-panel-border;

  [class*='acms-icon'] {
    font-size: inherit;
  }
}

.acms-timeline-time {
  float: right;
  color: global.$acms-color-gray70;
}

//acms-panelと組み合わせているとき
.acms-panel.acms-timeline-panel {
  padding: 0;
}
