.uk-modal {
  .modal-panel {
    box-sizing: border-box;
    max-width: 28rem;
    padding: var(--spacing-xl) !important;
    background-color: var(--color-white) !important;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 0 10px 10px rgba(102, 112, 133, 0.15);
  }

  .modal-panel [data-modal-content] p {
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    font-weight: 400;
    color: var(--text-tertiary);
  }

  .uk-overflow-auto,
  .uk-modal-body,
  [uk-overflow-auto] {
    scroll-behavior: smooth;
    scrollbar-width: auto;

    &::-webkit-scrollbar {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      height: 6px;
      width: 6px;
      background: transparent;
    }

    &::-webkit-scrollbar-button {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
      -webkit-appearance: none;
      appearance: none;
      background: transparent !important;
      border: 0 !important;
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--border-primary);
      border-radius: var(--radius-full);
    }

    &::-webkit-scrollbar-thumb:hover {
      background-color: var(--text-tertiary);
    }

    &::-webkit-scrollbar-corner {
      background: transparent;
    }
  }

}

.modal-warning {
  .uk-flex > .uk-icon-customiq {
    flex-shrink: 0;
    display: flex;
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
    color: var(--color-error) !important;

    svg {
      width: var(--icon-size-lg);
      height: var(--icon-size-lg);
    }

    svg path {
      stroke: var(--color-error) !important;
    }
  }
}