// public/frontend/soft-dialer/src/call-logs/components/CallLogItem.scss
@import "../../../general/assets/mixins/mixins.scss";
#softdialer-root {
  .call-log-item {
    width: 100%;
    height: 100%;
    padding: 18px 16px;
    background: white;
    border-bottom: 1px #ebedf3 solid;
    @include align-h-between;

    gap: 16px;

    .avatar {
      width: 40px;
      height: 40px;
      padding: 12px 11px;
      background: #e17055;
      border-radius: 40px;
      @include align-h-center;
      gap: 10px;

      .avatar-text {
        text-align: center;
        color: white;
        font-size: 14px;
        font-family: "Cera Pro", sans-serif;
        font-weight: 700;
        line-height: 15px;
        word-wrap: break-word;
      }
    }

    .call-details {
      width: 250px;
      flex: 1 1 0;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      gap: 5px;

      .caller-name {
        align-self: stretch;
        height: 20px;
        color: #201e5a;
        font-size: 15px;
        font-family: "Cera Pro", sans-serif;
        font-weight: 500;
        line-height: 19px;
        word-wrap: break-word;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .call-info {
        align-self: stretch;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;

        .call-type {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 6px;

          .call-type-indicator {
            width: 12px;
            height: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            //   background: #2143a4;
          }

          .call-type-text {
            color: #2143a4;
            font-size: 10px;
            font-family: "Cera Pro", sans-serif;
            font-weight: 400;
            line-height: 15px;
            word-wrap: break-word;
          }
        }

        .separator {
          width: 3.4px;
          height: 3.4px;
          background: #201e5a;
        }

        .patient-text {
          color: #2143a4;
          font-size: 10px;
          font-family: "Cera Pro", sans-serif;
          font-weight: 400;
          line-height: 15px;
          word-wrap: break-word;
        }

        .phone-number {
          color: #2143a4;
          font-size: 11px;
          font-family: "Cera Pro", sans-serif;
          font-weight: 400;
          line-height: 19px;
          word-wrap: break-word;
        }
      }
    }
    .audio-player-container,
    .call-logs-audio-player {
      width: 100%;
    }

    .call-recording-conatiner {
      width: 50%;
      // border: 1px solid red;
    }

    .duration-container {
      width: 100%;
      height: 36px;
      color: #394553;
      padding: 12px;
      font-size: 12px;
      border-radius: 40px;
      border: 1px #ebedf3 solid;
      display: flex;
      justify-content: flex-start;
      justify-content: center;
      align-items: center;
      gap: 16px;

      .duration-indicator {
        width: 20px;
        height: 20px;
        position: relative;
      }

      .duration-bar {
        width: 59px;
        height: 4px;
        background: #e0e1e7;
        border-radius: 2px;
      }

      .duration-time {
        width: 69px;
        height: 16px;
        position: relative;

        .time {
          left: 0;
          top: 1px;
          position: absolute;
          color: #394553;
          font-size: 12px;
          font-family: "Cera Pro", sans-serif;
          font-weight: 400;
          word-wrap: break-word;
        }

        .total-time {
          left: 49px;
          top: 1px;
          position: absolute;
          color: #394553;
          font-size: 12px;
          font-family: "Cera Pro", sans-serif;
          font-weight: 400;
          word-wrap: break-word;
        }
      }
    }

    .status-indicator {
      cursor: pointer;
      width: 36px;
      height: 36px;
      padding: 8px 16px;
      background: #ebedf3;
      border-radius: 39px;
      border: 1px #ebedf3 solid;
      @include align-h-center;
      //   display: flex;
      //   justify-content: center;
      //   align-items: center;
      gap: 9px;

      .status-dot {
        width: 12px;
        height: 12px;
        position: relative;
      }
    }

    .timestamp {
      width: 80px;
      height: 40px;
      display: inline-flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;

      .time-text {
        align-self: stretch;
        flex: 1 1 0;
        text-align: right;
        color: #201e5a;
        font-size: 10px;
        font-family: "Cera Pro", sans-serif;
        font-weight: 400;
        line-height: 15px;
        word-wrap: break-word;
      }

      .date-text {
        align-self: stretch;
        flex: 1 1 0;
        text-align: right;
        color: #201e5a;
        font-size: 10px;
        font-family: "Cera Pro", sans-serif;
        font-weight: 400;
        line-height: 15px;
        word-wrap: break-word;
      }
    }

    .action-indicator {
      justify-content: center;
      align-items: center;
      gap: 16px;
      display: flex;
      &--more-button {
        &:hover {
          border-radius: 4px !important;
        }
      }
      .action-line {
        width: 40px;
        align-self: stretch;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid;
        @include align-h-center;

        gap: 3px;
      }
    }
    .voip-call-answered-by {
      font-size: 10px;
      background-color: #BBE0B554;
      color: #678530;
      padding: 10px 16px ;
      border-radius: 45%;

    }


  }
}