/**
 * css 书写规范 
 * https://alidocs.dingtalk.com/i/nodes/Mk5evdR04jBV523gq4AgJQL3x2OlParn
 */
@import '~@cainiaofe/cn-ui-theme-light/token.scss';

.cn-sender {
  &-main {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.03),
      0 1px 6px -1px rgba(0, 0, 0, 0.02),
      0 2px 4px 0 rgba(0, 0, 0, 0.02);
    border-color: #4161fd;
    border-radius: 12px;
    border-width: 1px;
    border-style: solid;
  }

  &-schema-menu {
    &-async-select {
      width: 220px;
    }
  }

  &-skill {
    margin: 0 4px;
  }

  &-input {
    flex: 1;
    min-width: 0;

    &-slot {
      width: 100%;
      line-height: 2.5;

      // 为内容区域的块级元素添加行间距
      > div,
      > span {
        display: inline-block;
        vertical-align: baseline;
      }

      // 为换行添加间距
      br {
        line-height: 2.5;
      }

      // 确保内联元素之间的间距
      > * + * {
        margin-left: 0;
      }

      // Placeholder 样式
      // 使用 :empty 伪类，当元素为空时显示 placeholder
      &:empty::before {
        content: attr(data-placeholder);
        color: #999;
        pointer-events: none;
        line-height: 34px;
      }
    }
  }

  &-slot-tag {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    margin-left: 4px;
    margin-right: 4px;
    z-index: 1;
    border-radius: 6px;
    background: #fff;
    font-family: Alibaba PuHuiTi 3;
    font-size: 12px;
    font-weight: normal;
    line-height: 14px;
    letter-spacing: normal;
    background-color: #f0f5ff;
    max-width: 240px;
    min-width: 0;

    // 时区日期组件：单日期，内容较短
    &[data-slot-component='CnTimeZoneDatePicker'] {
      max-width: 300px;
    }

    // 时区日期区间组件：起止日期，内容较长
    &[data-slot-component='CnTimeZoneRangeDatePicker'] {
      max-width: 450px;
    }

    &-name {
      color: #666;
      flex-shrink: 0;
    }

    &-value {
      color: #4161fd;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      min-width: 0;
      flex: 1;
    }

    &-icon {
      color: #4161fd;
      width: 3px;
      height: 3px;
      flex-shrink: 0;
    }
  }

  &-content {
    display: flex;
    gap: 8px;
    width: 100%;
    padding-block: 12px;
    padding-inline-start: 12px;
    padding-inline-end: 12px;
    box-sizing: border-box;
    align-items: flex-end;

    // 移除输入框边框样式
    .cn-sender-input-slot {
      border: none;
      outline: none;
      box-shadow: none;

      &:focus,
      &:active,
      &:focus-visible {
        border: none;
        outline: none;
        box-shadow: none;
      }
    }
  }

  &-disabled {
    background: rgba(0, 0, 0, 0.04);
  }

  &-footer {
    padding-inline-start: 12px;
    padding-inline-end: 12px;
    padding-block-end: 12px;
    padding-block-start: 4px;
    box-sizing: border-box;
  }

  &-actions-list {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;

    &-presets {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }

  &-actions-btn {
    &-send {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background-color: #000;
      border: none;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;

      &:disabled,
      &-disabled {
        cursor: not-allowed;
        background-color: rgba(0, 0, 0, 0.25) !important;
      }

      &-icon {
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        gap: 3.5px;
        z-index: 0;

        img {
          width: 14px;
          height: 14px;
          object-fit: contain;
        }

        svg {
          width: 28px;
          height: 28px;
        }
      }

      &:disabled &-icon,
      &-disabled &-icon {
        svg {
          filter: grayscale(100%) opacity(0.5);
        }
      }
    }

    &-record {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background-color: transparent;
      border: none;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      &-icon {
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        gap: 3.5px;
        z-index: 0;

        img {
          width: 16px;
          height: 16px;
          object-fit: contain;
        }
      }
    }

    &-loading-button {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background-color: transparent;
      border: none;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.2s;

      &:hover {
        background-color: rgba(0, 0, 0, 0.05);
      }

      &:disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      &-icon {
        width: 28px;
        height: 28px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        z-index: 0;

        svg {
          width: 16px;
          height: 16px;
          display: block;
        }
      }
    }
  }
}
