@use "./mixins/mixins.scss" as *;

@include b(timeline){
  font-size: var(--x-font-size-base);
  --x-timeline-node-size-normal: 11px;
  --x-timeline-node-size-large: 13px;
  --x-timeline-node-color:var(--color-grey-5);
  &-item{
    position: relative;
    padding-bottom: 20px;
    &__tail{
      position: absolute;
      height: 100%;
      border-left: 1px solid var(--color-grey-4);
    }
    &__node{
      position: absolute;
      background-color: var(--x-timeline-node-color);
      border-color: var(--x-timeline-node-color);
      border-radius: 50%;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__node--normal{
      height: var(--x-timeline-node-size-normal);
      width: var(--x-timeline-node-size-normal);
    }
    &__node--large{
      height: var(--x-timeline-node-size-large);
      width: var(--x-timeline-node-size-large);
    }
    &__node--primary{
      background-color: var(--color-blue-6);
      border-color: var(--color-blue-6);
    }
    &__node--success {
      background-color: var(--color-green-4);
      border-color: var(--color-green-4);
    }
    &__node--warning {
      background-color:var(--color-orange-4);
      border-color:var(--color-orange-4);
    }
    &__node--danger {
      background-color: var(--color-red-4);
      border-color: var(--color-red-4);
    }
    &__node--info{
      background-color: var(--color-grey-6);
      border-color: var(--color-grey-6);
    }
    &__right-wrapper{
     position: relative;
     padding-left: 28px;
     font-weight: 400;
    }
    &__node.is-hollow{
      background: var(--color-white) !important;
      border-style: solid;
      border-width: 2px;
    }
    &__icon{
      font-size: 11px;
      color: var(--color-white);
    }
    &__left-wrapper{
      position:absolute;
      top:0;
      left:0;
      height: 100%;
     }
    &__title{
      color: var(--color-grey-8);
      font-weight: 500;
      line-height: 18px;
    }
  }
}