@skip-gap: .8rem;

.component-list-item-touch{
  height: .6rem;
  line-height: .6rem;
  background: @white;
  display: block;
  position: relative;
  .box-shadow(0 2px 2px rgba(116,119,173, 0.1));

  dt,dd{
    display: block;
    line-height: .6rem;
    .transition(all .2s ease);
  }

  dt{
    color: @blue-gray;
    font-style: @font-16;
    &:extend(.absolute-position);
    &:extend(.text-ellipsis);

    left: .2rem;
    right: 1rem;
    width: auto;
  }

  dd{
    &:extend(.absolute-position);
    left: auto;

    &.date{
      right: .2rem;
      width: 0.8rem;
      text-align: right;
      font-size: @font-xxs;
      color: @gray-dark;
    }

    &.delete-btn{
      width: 0;
      background: @yellow-dark;
      padding: 0;
      margin: 0;
      font-size: 0;
      right: 0;
      color: @white;
      text-align: center;
      overflow: hidden;
    }
  }
  &.show-delete-btn{
    dt{
      left: -1.2rem;
      right: 1.8;
    }
    dd{
      &.date{
        right: 1rem;
      }
  
      &.delete-btn{
        width: .8rem;
        font-size: @font-16;
      }
    }
  }
}