@use '../../../styles/breakpoints' as *;

.drawer {
  :global(.ant-drawer-body) {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

.body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* MOB-035: Touch targets ≥44px (WCAG 2.2) */
.footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

.footerButtonPrimary {
  min-width: 120px;
  min-height: 44px;
}

.footerButtonSecondary {
  min-width: 80px;
  min-height: 44px;
}

/* RESP-019 (R31): drawer de filtros utilizável em 320px — padding, font-size e touch targets */
@media (max-width: $bp-small-mobile) {
  .body {
    padding: var(--padding-md, 16px);
  }

  /* Font-size ≥16px em inputs evita zoom automático no iOS ao focar */
  .body :global(input),
  .body :global(select),
  .body :global(textarea) {
    font-size: 16px !important;
  }

  /* Touch targets ≥44px para controles de formulário no drawer */
  .body :global(.ant-input),
  .body :global(.ant-input-number .ant-input-number-input),
  .body :global(.ant-select .ant-select-selector),
  .body :global(.ant-picker) {
    min-height: 44px;
  }

  .body :global(.ant-select-single .ant-select-selector) {
    min-height: 44px;
    align-items: center;
  }
}