.pisell-eftpos-pay-huifu {
  &-scan {
    height: 100%;
    display: flex;
    flex-direction: column;

    &-status {
      position: relative;

      &-wrapper {
        position: absolute;
        left: -4px;
        bottom: 4px;
        width: 14px;
        height: 14px;
      }
    }

    &-header {
      position: relative;
      padding-bottom: 20px;
      display: flex;
      align-items: center;

      &-close {
        position: absolute;
        right: -10px;
        padding: 10px;
        cursor: pointer;
      }

      &-divider {
        position: absolute;
        bottom: 0;
        left: -24px;
        right: -24px;
        height: 1px;
        background: #eaecf0;
      }

      &-title {
        color: #101828;
        font-size: 18px;
        font-weight: 600;
      }
    }

    &-content {
      padding-bottom: 24px;
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 20px;

      &-title {
        color: #344054;
        font-size: 14px;
        font-weight: 600;
      }

      &-scanner {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 16px;
        border-radius: 12px;

        &-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 4px;
        }
      }

      &-scanner-active {
        border: 1px solid #75e0a7;
        background: #f6fef9;
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

        &-title {
          color: #067647;
          font-size: 14px;
          font-weight: 600;
        }

        &-desc {
          color: #067647;
          font-size: 14px;
          font-weight: 400;
        }
      }

      &-scanner-unactive {
        border: 1px solid #fda29b;
        background: #fffbfa;
        box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);

        &-title {
          color: #b42318;
          font-size: 14px;
          font-weight: 600;
        }

        &-desc {
          color: #b42318;
          font-size: 14px;
          font-weight: 400;
        }
      }

      &-camera {
        padding: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 12px;
        background: #f2f4f7;
        cursor: pointer;

        &-right {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 6px;
        }

        &-title {
          color: #175cd3;
          font-size: 14px;
          font-weight: 500;
        }

        &-desc {
          color: #000;
          font-size: 14px;
          font-weight: 400;
        }
      }

      &-input-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;

        &-title {
          color: #344054;
          font-size: 14px;
          font-weight: 600;
        }

        &-tip {
          color: #475467;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }

    &-footer {
      position: relative;
      padding-top: 24px;
      display: flex;
      gap: 12px;

      &-divider {
        position: absolute;
        top: 0;
        left: -24px;
        right: -24px;
        height: 1px;
        background: #eaecf0;
      }

      &-button {
        height: 48px;
      }
    }
  }
}